Правильное использование метода .on в Jquery

Question

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

Увы, это устарело, и у меня остался метод .on.

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

проверьте этот код:

jQuery('#who_me').live('click', function(){
        alert('test123');
        return false;
    });

должно совпадать с:

jQuery('#who_me').on('click', function(){
        alert('test123');
        return false;
    });

но когда я заменяю контент методом .html после вызова ajax, работает только живой метод.

Может кто-нибудь прояснить это для меня?

Answer 1

Вы не используете .on() правильно.Это лучшая реализация, если объект #who_me приходит и уходит.

jQuery(document.body).on('click', '#who_me', function(){
    alert('test123');
    return false;
});

Селектор, который вы используете в объекте jQuery для .on(), должен быть объектом, который присутствует во время установки событияобработчик и никогда не удаляется и не воссоздается; это либо объект, на который вы хотите установить событие, либо родительский объект этого объекта.Селектор, передаваемый в качестве второго аргумента .on(), является необязательным селектором, который соответствует объекту, для которого вы хотите событие.Если вам нужно поведение типа .live(), то вы должны передать статический родительский объект в объект jQuery и селектор, который соответствует фактическому объекту, для которого вы хотите событие, во втором аргументе.

В идеале вы должны поместитьродительский объект в объекте jQuery, который находится относительно близко к динамическому объекту.Я показал document.body только потому, что знаю, что это сработает, и не знаю остальную часть вашего HTML, но вы бы предпочли приблизить его к реальному объекту.Если вы поместите слишком много динамических обработчиков событий на объект document или document.body, то обработка событий может действительно замедлиться, особенно если у вас есть сложные селекторы или обработчики для частых событий, таких как щелчок или перемещение мыши.

Для справки, 100% эквивалентный вашему .live() коду:

jQuery(document).on('click', '#who_me', function(){
    alert('test123');
    return false;
});

.live() просто устанавливает все свои обработчики событий на объект документа и использует всплывающее окно для просмотра всех происходящих событий.на других объектах на странице.jQuery устарел .live(), потому что лучше НЕ устанавливать все ваши обработчики событий в реальном времени на объект документа (из соображений производительности).Итак, выберите статический родительский объект, который находится ближе к вашему объекту.

Answer 2

То, как вы используете on, это в основном замена для bind, а не live. С on, как и с live и delegate, вы можете использовать делегирование событий, но вы должны указать конкретный содержащий элемент (как всегда было в случае delegate).

На простейшем уровне это может быть document. В этом случае обработчик будет работать точно так же, как live:

jQuery(document).on('click', '#who_me', function() {
    alert('test123');
    return false;
});

Однако было бы лучше найти ближайший элемент, содержащий элементы, которые будут существовать. Это дает прирост производительности.

jQuery('#some_el').on('click', '#who_me', function() {
    alert('test123');
    return false;
});

Answer 3

Контекст при использовании .live был document, поэтому селектор для .on должен быть document

$(document).on("click","#who_me",function(){...});

Answer 4

jQuery(document).on('click', '#who_me', function(){
    alert('test123');
    return false;
});

должно быть эквивалентно jQuery.live('#who_me', function() { // code here });

Answer 5

Нет.

$( '#who_me' ).live( 'click', function () { ... });

совпадает с:

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

Однако, вы обычно не хотите привязывать много обработчиков к объекту document. Вместо этого вы связываетесь с ближайшим статическим предком (в данном случае #who_me). Итак:

$( '#wrapper' ).on( 'click', '#who_me', function () { ... });

, где #wrapper является предком #who_me.

Answer 6

Для замены .live () вам нужен еще один параметр в вызове .on ().

// do not use! - .live(events, handler)
$('#container a').live('click', function(event) {
    event.preventDefault();
    console.log('item anchor clicked');
});

// new way (jQuery 1.7+) - .on(events, selector, handler)
$('#container').on('click', 'a', function(event) {
    event.preventDefault();
    console.log('item anchor clicked');
});

Источник: http://www.andismith.com/blog/2011/11/on-and-off/