JQuery 'on' vs. 'live'

Question

У меня сценарий, когда JQuery 'on' & 'live' не выполняет то же самое. Возможно, кто-то может указать, почему. Я использую JQuery 1.7.2 с моим проектом и в этой сборке «live» заменен на «on». Я использую следующий код на странице списка. В принципе, на этой странице есть алфавитная панель, которую пользователь может нажать &, загрузит всех клиентов с этой фамилией. Я бы хотел, чтобы ссылка выполнялась через ajax.

Код:

$("a.listajax").on("click", function (e) { 
    e.preventDefault(); 
    var url = $(this).attr("href"); 
    $("div.content").load(url + " div.content"); 
    return false; 
}); 

Проблема здесь состоит в том, что, когда я сначала загрузить страницу и нажмите на ссылку, все работает отлично. Страница загружается через ajax. Однако после этого все ссылки теряют привязки &, тогда, если я нажимаю на какие-либо ссылки, я получаю целую страницу.

Я заменил 'on' на 'live', и ссылки начали вести себя отлично, даже при последующих щелчках.

Что мне не хватает?

Answer 1

Один не просто заменяет .live на .on.

$("a.listajax").live('click', function(e)) 

эквивалентно:

$(document).on('click', 'a.listajax', function(e)) 

Важно

Если есть общий предок для всех ваших .listajax якорей, которые не будут удалены из DOM, вы должны использовать это (самый глубокий из возможных) вместо document; это улучшит производительность.

Answer 2

В этом весь смысл live(). Он восстанавливает новые элементы DOM при их создании. На сайте jQuery много подобных вопросов, например this one, потому что это может быть немного запутанным.

Согласно jQuery docs, вы используете live() для:

Присоединить обработчик события для всех элементов, которые соответствуют текущему селектор, сейчас и в будущем.

"... в будущем" часть является ключевым, потому что on()does not have that.