jQuery: использовать .on() вместо .live() для присоединения обработчика событий к объекту $ ('selector')

Question

Я понимаю, что .live() был удален из jQuery 1.9 и что должен использоваться метод .on() вместо. Пока .on() отлично работает для меня, если селектор является строкой. Например,

$("a.offsite").live("click", function(){ alert("Goodbye!"); }); 

превратился в

$(document).on("click", "a.offsite", function(){ alert("Goodbye!"); }); 

Но как же я использую .он() для объекта JQuery селектор (или совокупность объектов) следующим образом?

var jele = $('.nav').find("a.offsite"); 
$(jele).live("click", function(){ alert("Goodbye!"); }); 

превратился в

var jele = $('.nav').find("a.offsite"); 
$(document).on("click", jele, function(){ alert("Goodbye!"); }); 

ли код выше конвертируется правильно? Проблема, с которой я сталкиваюсь, - это другие обработчики событий, связанные с одним и тем же событием, но другой селектор также выполняется при срабатывании события. Поэтому я подозреваю, что это не правильный путь, но я не могу найти подобного примера в официальной документации.

Я знаю, что я мог передать селекторную строку вместо объекта jele в метод .on(), но в некоторых случаях у меня просто нет доступа к строке селектора, например. когда объект jele передается в качестве аргумента в функцию, в которой происходит привязка.

Answer 1

После того, как вы получили объект JQuery jele, попытайтесь вызвать функцию .on() на jele:

$(jele).on("click", your-code-here); 

Другой способ сделать это, имеющее строку выбора из jele. Отъезд this post Я нашел о получении селекторной строки любого объекта JQuery. Если у вас есть строка в jele селектор, ваш код должен выглядеть следующим образом:

$(document).on("click", selector, your-code-here); 

Answer 2

$(jele).on("click", function(){ alert("Goodbye!"); }); 

Answer 3

.on() заменить .bind(), .live() и .delegate()

использование:

$('div').on('click',function(){/* ... */}); //equivalent to .bind() 

это 3 строки эквивалентны :

$('a','#menu').live('click',function(){/* ... */}); 
$('#menu').delegate('a','click',function(){/* ... */}); 
$('#menu').on('click','a',function(){/* ... */});