Как перевести jQuery.live() в .on() с событиями, связанными с этим?

Я в процессе преобразования кода из устаревшего API .live() в .on() (см. примечания к выпуску jQuery 1.7)

У меня есть живые события, прикрепленные к this в нескольких настраиваемых плагинах jQuery, например.

this.live('click', function() {
    ...
});

jQuery.live() doc содержит некоторые рекомендации о том, как перейти на .on() следующим образом:

$(selector).live(events, data, handler);                // jQuery 1.3+
$(document).on(events, selector, data, handler);        // jQuery 1.7+

однако это не работает:

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

поэтому... как сделать live-события привязаны к this работать с новым API on()?

Ответы

Ответ 1

Сделайте снимок:

$(document).on('click', this.selector, handler);

Объект jQuery имеет свойство selector, которое представляет селектор, используемый для создания этого объекта.

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

Чтобы избежать использования внутреннего свойства, вы можете просто изменить API своего плагина, чтобы он явно передавался.

Ответ 2

Свойство .selector недокументировано и, вероятно, будет удалено при удалении .live(). Как выглядел этот код при использовании .live()? Как используются эти плагины?

Ответ 3

Как и в jQuery 1.7, функция on ^docs используется для замены существующих отдельных методов привязки события:

one ^docs - это особый случай, и вы должны продолжать использовать его как есть.

Существующие события продолжают существовать и являются просто псевдонимами on. Нет официального отчета о том, что они будут удалены, поэтому вы можете быть в безопасности, чтобы продолжать использовать их, если вы их понимаете лучше. live и die устарели от jQuery 1.7, как упоминалось в сообщении в блоге и на live docs.

Событие on имеет несколько форматов, но подпись функции выглядит следующим образом:

.on( events [, selector] [, data], handler )

Bind:

$(selector).bind(events, data, handler);
$(selector).on(events, null, data, handler);

Источник:

bind: function( types, data, fn ) {
  return this.on( types, null, data, fn );
}

Делегат:

$(selector).delegate(subselector, events, data, handler);
$(selector).on(events, subselector, data, handler);

Источник:

delegate: function( selector, types, data, fn ) {
  return this.on( types, selector, data, fn );
}

Live:

$(selector).live(events, data, handler);
$(document).on(events, selector, data, handler);

Источник:

live: function( types, data, fn ) {
  jQuery( this.context ).on( types, this.selector, data, fn );
  return this;
}

_{Обратите внимание, что this.context был установлен с использованием this.context = document;, как указано в $(document).on(...).}

Ответ 4

$(selector).on(events, data, handler)

Все еще отлично работает. Вы все еще можете использовать это. Ознакомьтесь с .on docs