JQuery.on('click') против .click() и .delegate('click')

Я использую .click() и delegate('click'), поэтому, когда я читал оба, они были устаревшими в последних версиях jQuery, я думал, что буду читать на нем, но немного почесываю голову.

Документация здесь, кажется, предполагает, что это замена для .live() и . delegate(), но .click() и . bind() имели другое поведение, а именно привязку к существующим объектам, где остальные привязывались к любые объекты, которые соответствовали шаблону селектора в течение срока службы DOM.

В большинстве случаев это не будет иметь большого значения, но при динамическом добавлении элементов в DOM это важное различие. Новые объекты, соответствующие старому шаблону, не будут иметь слушателей, привязанных к событию click, используя .click(), но с .delegate().

Мой вопрос: как использовать метод .on() для дублирования поведения как существующих .delegate(), так и .bind()? Или все в будущем идет к стилю .delegate()?

Ответы

Ответ 1

Оба режима все еще поддерживаются.

Следующий вызов bind():

$(".foo").bind("click", function() {
    // ...
});

Можно напрямую преобразовать в следующий вызов on():

$(".foo").on("click", function() {
    // ...
});

И следующий вызов delegate():

$("#ancestor").delegate(".foo", "click", function() {
    // ...
});

Может быть преобразован в следующий вызов on():

$("#ancestor").on("click", ".foo", function() {
    // ...
});

Для полноты следующего вызова live():

$(".foo").live("click", function() {
    // ...
});

Может быть преобразован в следующий вызов on():

$(document).on("click", ".foo", function() {
    // ...
});

Ответ 2

Метод on может заменить как bind, так и delegate в зависимости от того, как он используется (а также click как bind может заменить это):

.click(handler) == .on('click', handler)

.bind('click', handler) ==  .on('click', handler)

.delegate('click', '#id', handler) == .on('click', '#id', handler)

Ни методы click, delegate, ни bind не дошли до устаревшей страницы. Я сомневаюсь, что метод click никогда не будет.

Ответ 3

Вы можете вывести использование псевдонимов из исходного кода.

console.log($.fn.delegate);
function (a, b, c, d) {
    return this.on(b, a, c, d);
}

console.log($.fn.bind);
function (a, b, c) {
    return this.on(a, null, b, c);
}

В документации приведены примеры использования:

$(elements).delegate(selector, events, data, handler);  // jQuery 1.4.3+
$(elements).on(events, selector, data, handler);        // jQuery 1.7+