jQuery on() не работает должным образом

Question

Добрый день. Недавно я начал изучать jQuery, и я очень зелёный, когда дело доходит до разработки в jQuery.

У меня возникла следующая проблема с событием .on(). Я уже искал переполнение стека для ответов, но я не нашел никакого рабочего решения для моего дела. У меня есть следующий код:

$('input.a').on('click',function(){ 
    $(this).after('<input class="a" type="button" value="click me">'); 
}); 

Эта функция работает нормально, но кнопки, которые генерируются, ничего не делают, когда я нажимаю на них. Я должен использовать .live(); но, поскольку я использую jQuery 1.10.2, это событие устарело. После посещения JQuery документации я обнаружил, что я должен использовать .он() следующим образом

$('input.a').on('click','input.a',function(){ 
    $(this).after('<input class="a" type="button" value="click me">'); 
}); 

Но как только я, вся функция перестает работать (я предполагаю, что я не получаю какой-либо обратная связь), но в консоли разработчика нет ошибок. Я что-то не так, или есть какие-либо другие замены для события .live()?

Answer 1

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

$(document).on('click','input.a',function(){ 
    $(this).after('<input class="a" type="button" value="click me">'); 
}); 

Answer 2

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

$(document).on('click','input.a',function(){ 
    $(this).after('<input class="a" type="button" value="click me">'); 
}); 

Answer 3

замена для $(selector).live(eventName, handler) является $(document).on(eventName, selector, handler).

Под крышкой live использует делегацию событий, что означает, что она обрабатывает событие, когда оно пузырится выше в дереве DOM, особенно когда оно пузырится вверх до дерева DOM с элементом документа. Итак, чтобы создать тот же самый опыт, вы привязываете обработчик к document с использованием on, а затем передаете селектор в качестве второго аргумента, чтобы указать, что вы хотите обрабатывать события, в которых исходная цель соответствовала этому селектору.

Поскольку вы контролируете этот сценарий больше, чем с помощью live, вы также можете выбрать привязку к другому элементу в дереве DOM, если это имеет смысл. Таким образом, вместо привязки к document вы можете привязать только к контейнеру, в котором хранятся ваши динамически созданные элементы (например, $('.inputWrap').on('click', 'input.a', function (event) { /* ... */ }).