JQuery: как заменить .live на .on?

Возможный дубликат:
jQuery 1.7 - Включение Live() в on()

В соответствии с API jQuery (http://api.jquery.com/on/ функция "live" устарела, рекомендуется использовать 'on' вместо, Но когда я заменю 'live' на 'on' в моем коде, jQuery больше не может найти более поздние добавленные элементы:

Это работает (но устарело):

$('li.bibeintrag').live('click', function(){
alert('myattribute =' + $(this).attr('myattribute'));
});

Это пример из API для 'on':

$("#dataTable tbody tr").on("click", function(event){
    alert($(this).text());
});

Когда я меняю свой код на это ('live' заменен на 'on'), он больше не работает (jQuery не найдет более поздние добавленные элементы (например, с добавлением)):

$('li.bibeintrag').on('click', function(){
alert('myattribute =' + $(this).attr('myattribute'));
});

Что я делаю неправильно? Может кто-нибудь помочь, пожалуйста?

Ответ 1

Вы должны добавить событие к любому родительскому элементу li.bibeintrag.

$('ul').on('click', "li.bibeintrag", function(){
    alert('myattribute =' + $(this).attr('myattribute'));
});

Ответ 2

jQuery live, если смотреть через стиль $.on, выглядел бы так:

$(document).on("click", "li.bibeintrag", function(){

});

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

Поскольку вы отвечаете на клики на li, слушайте на уровне родительских элементов:

$("ul#myList").on("click", "li.bibeintrag", function(){
  /* Respond */
});

Имейте в виду, что без предоставления второго параметра $.on обработчик события привязан к самому элементу, то есть вы не получите поведение $.live, которое будет реагировать на динамически добавленные элементы.

Ответ 3

Это должно работать

$('ul').on('click','li.bibeintrag' function(){
  alert('myattribute =' + $(this).attr('myattribute'));
});