on () против функции live () щелчка по элементу, который еще не существует

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

Я нашел много ответов, предлагающих использовать .live('click',function(){...}). Это прекрасно работает!

Однако .live() устаревает с jQuery 1.7.

Итак, я попытался вместо этого использовать .on('click',function(){...}), но это не работает (действует так же, как .click().

Кто-нибудь знает, почему или что я могу сделать, чтобы использовать .on() аналогично .live() (что работает)?


jquery onclick onclicklistener
person d-_-b    schedule 26.02.2013    source источник
comment
@ wrschneider99 да, действительно!   -  person d-_-b    schedule 26.02.2013

Ответы (2)


arrow_upward
30
arrow_downward

Поскольку on() заменяет и bind(), и live(), вам нужно передать третий параметр, чтобы использовать делегирование событий (другими словами, чтобы оно работало как старое live()):

$('#container').on('click', '.element', function(){ });
person Johan    schedule 26.02.2013
comment
Спасибо, а что, если #container тот же элемент, что и .element? Я пытался использовать один и тот же элемент в обоих местах, но безуспешно:/ - person d-_-b; 26.02.2013
comment
@iight Тогда это не сработает. #container не может быть сгенерирован динамически. Как сказал j08691, выберите элемент-оболочку как можно ближе к динамически добавляемому элементу, чтобы повысить производительность. - person Johan; 26.02.2013
comment
должен быть родительским элементом, верно? - person d-_-b; 26.02.2013
comment
@iight Верно. Родительский элемент, который не генерируется динамически и максимально приближен в DOM. - person Johan; 26.02.2013
comment
Потрясающе, спасибо! работает отлично!!! - person d-_-b; 26.02.2013
comment
@iight Np, рад помочь! - person Johan; 26.02.2013
comment
К вашему сведению Внутри функции $(this) будет равно $('.element'), а не $('#container') - person toad; 10.05.2016

arrow_upward
10
arrow_downward

Вы должны иметь возможность использовать такой формат:

$(document).on('click','element', function(){...});

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

Из документов jQuery .on():

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

person j08691    schedule 26.02.2013
comment
Спасибо! это работает, но теперь мне просто нужно исследовать всю привязку $(document). Тем не менее, это решает проблему! - person d-_-b; 26.02.2013