Jquery добавляет слушатели событий к динамически добавленным элементам

Итак, прямо сейчас, я понимаю, что для присоединения слушателя событий к динамически добавленному элементу вы должны переопределить слушателя после добавления элемента. Есть ли способ обойти это, поэтому вам не нужно выполнять целый дополнительный блок кода?

Ответ 1

Используя .on(), вы можете определить свою функцию один раз, и она будет выполняться для любых динамически добавленных элементов.

например

$('#staticDiv').on('click', 'yourSelector', function() {
  //do something
});

Ответ 2

$(document).on('click', 'selector', handler);

Где click - имя события, а handler - обработчик событий, например ссылка на функцию или анонимную функцию function() {}

PS: если вы знаете конкретный node, к которому добавляются динамические элементы, вы можете указать его вместо document.

Ответ 3

При добавлении нового элемента с вызовами плагина jquery вы можете сделать следующее:

$('<div>...</div>').hoverCard(function(){...}).appendTo(...)

Ответ 4

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

$('#musics').on('change', '#want',function(e) {
    $(this).closest('.from-group').val(($('#want').is(':checked')) ? "yes" : "no");
    var ans=$(this).val();
    console.log(($('#want').is(':checked')));
});

http://jsfiddle.net/swoogie/1rkhn7ek/39/