Добавление прослушивателей событий к текущим и будущим элементам с определенным классом

С помощью JQuery можно добавить прослушиватель событий к любому элементу, который в настоящее время или будет в будущем, иметь определенный класс?

Я работаю над проектом, который сильно использует contentEditable, поэтому DOM меняется, и элементы могут добавлять и удалять классы в результате ввода пользователем.

Я бы хотел сказать, что "элементы класса X должны делать Y при нажатии", но если я правильно понимаю, $( ". X" ). click (Y) добавит только прослушиватель событий к элементам, которые в настоящее время имеют класс X.

Кроме того, если элемент больше не является частью класса X, он все равно будет иметь прослушиватель событий щелчка.

Как я могу это сделать?

Ответы

Ответ 1

Угу. То, о чем вы говорите, называется делегированием событий. Вот пример:

$('#container').on('click', '.innerElement', function(){
   /// Do stuff
});

В вашем случае #container будет элементом, который, как известно, существует при загрузке страницы, который будет содержать дочерние элементы, которые вас интересуют (сейчас или в будущем). Этот подход использует преимущества пузырьков событий в DOM.

Как упоминается еще один плакат, живой метод также будет работать, но он был устаревшим в jQuery 1.7 и, как правило, не так эффективен, как использование более избирательного делегирования (например, пример выше).

Ответ 2

вы хотите использовать делегирование событий. jquery 1.7 сделал это более абстрактным, чем предыдущие, но выглядит примерно так:

$("#myWrappingElement").on("click", ".myclass", function(event){
    alert($(this).text());
});

это в основном добавляет прослушиватель событий щелчка к элементу #myWrappingElement, и jquery автоматически увидит, что такое исходная цель события, и запускает надлежащую функцию. это означает, что вы можете добавлять или удалять элементы .myclass и все еще иметь на них огонь.

Ответ 3

jQuery live() метод swill позволяет иметь "живой" исполнитель действий, поэтому, если новые элементы DOM соответствуют селектору, они будут прикреплены к прослушивателю действий. Например:

$(".X").live("click", function(){
    alert('some action');
});

См. документацию для получения дополнительной информации: http://api.jquery.com/live/

Я не уверен, что вторая часть вашего вопроса о том, как сохранить прослушиватель действий при удалении класса os, возможно, у кого-то еще может быть решение.