Jquery изменения связывают не работают на динамическом контенте

Я хочу, чтобы связать событие изменения на динамическом ввода CheckBox элемента, но это странно ...Jquery изменения связывают не работают на динамическом контенте

Этот код работает:

$("form").on('change', 'input:checkbox.checkbox_main', function() { 
      console.log('change ok'); 
     });

Это один дон Работы:

$('input:checkbox.checkbox_main').on('change', function() { 
      console.log('change ok'); 
     });

Может ли кто-нибудь объяснить мне, почему?

Я читаю везде, что функция привязки устарела в jquery v3.1, и что я использую для замены? Каков хороший способ уловить событие изменения в динамическом флажке?

источник

2016-10-27 arno

Да, это делегирование событий для получения дополнительной справки https://davidwalsh.name/event-delegate | http://javascript.info/tutorial/event-delegation –

первыйevent является bound на form и change выполняется на любых дочерних элементов, соответствующих selector. Поэтому, если вы добавите туда какие-либо динамические элементы, они будут пойманы.

The второйevent соответствует элементы, которые существуют в настоящее время в DOM в момент выполнения selector. Так что любые новые элементы будут не быть подняты.

EDIT

Если у вас есть динамическое меню, как это:

<ul id='topMenu'> 
    <li></li> 
</ul>

А вы хотели бы связать любые события на своих детей (в том числе всех возможных) Я хотел бы сделать это:

$('#topMenu').on('click', 'li', function() { 

});

Многие люди просто прилипает к DOM $(document).on('click', '..., но я хотел бы сохранить свой код ясным и точным поэтому я всегда выбираю наименьший возможный родительский контейнер

источник

2016-10-27 08:56:32 Ted

Итак, как правильно заменить событие привязки? с первым примером? – arno

@arno - зависит от того, какой элемент 'element' ** статический ** на вашей странице. Я всегда нахожу минимально возможный родительский контейнер и привязываю к нему события своих детей. многие люди всегда используют 'DOM', но я стараюсь быть более умным, чем это. – Ted

document является контейнером и рассматривается как DOM.

при попытке доступа к $('input:checkbox.checkbox_main').on('change') он не будет работать, поскольку jQuery не смог идентифицировать элемент HTML, доступный во время document.ready.

$("form").on('change', 'input:checkbox.checkbox_main' это специально связывает событие динамически с контейнером для конкретного элемента.

Далее спецификация,

$('body') цели <body> элемента HTML, в то время как $(document) цели весь документ HTML. Это означает, что если вы хотите что-то ссылаться в элементе <head>, вы хотите попасть туда $(document).

FYI, я предполагаю, что элемент input:checkbox.checkbox_main динамически добавлен в DOM.

источник

2016-10-27 08:57:08

Я читал везде, что функция bind устарела в jquery v3.1, и что я использую для замены? – arno

'.on()'. –

Jquery изменения связывают не работают на динамическом контенте

ответ

Смежные вопросы