Динамические селекторы в jquery

Question

У меня есть код, похожий на этот, где я назначаю функцию для клика, даже если он меняет стиль

$(".style1, .style2", "#section").click(function () {
    changeStyle($(this));
});

может случиться так, что элемент изменится с style1 на style2, поэтому элемент должен по-прежнему нажиматься, но действия не вступают в силу. Кажется, что список элементов $ (". Style1, .style2", "#section") создается при загрузке и не обновляется при изменении стиля для включения новых элементов.

Я попытался вставить вставленный код в функцию и вызвать его в конце функции changeStyle, но это добавляет еще один триггер, поэтому, когда я нажимаю другие элементы с помощью style1 или style2, действия запускаются 2, 3, 4, ... раз. И я только один, чтобы вызвать его один раз.

Как я могу решить это?

Спасибо за вашу помощь.

Answer 1

Я не совсем понимаю вашу проблему, но похоже, что вы создаете новые элементы и динамически добавляете к ним также обработчики событий.

Если это ваша проблема, вам просто нужно использовать .delegate(), который обеспечит привязку обработчика событий к существующим и динамически создаваемым элементам позже в жизненном цикле вашей страницы. Таким образом, вам не нужно назначать обработчики событий каждый раз, когда вы создаете элемент.

$('#section').delegate('.style1,.style2', 'click', function() {
    changeStyle($(this));
});

Кроме того, ваша функция changeStyle() звучит так, как если бы она была полезна для .toggleClass() или аналогичной функции jQuery.

Answer 2

Попробуйте изменить использование «клика», чтобы жить.Итак,

$(".style1, .style2", "#section").live("click", function (e) {
  changeStyle($(e.target));
});

Live означает, что проверка селектора выполняется по щелчку, а не по загрузке страницы.Вы можете увидеть документацию здесь: http://api.jquery.com/live/