JQuery on() селектор

Какова цель selector в методе jQuery on()?

В какой ситуации

$("#fish").on("click", ".button", function() {
    // something
});

лучше, чем, скажем,

$("#fish").find(".button").on("click", function() {
    // something
});

?

Я просмотрел документацию jQuery и нашел:

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

Когда предоставляется селектор, обработчик события называется делегированным. Обработчик не вызывается, когда событие происходит непосредственно на связанном элементе, но только для потомков (внутренних элементов), соответствующих селектору. jQuery создает пузырьки события от целевого объекта до элемента, к которому прикреплен обработчик (т.е. самого внутреннего к внешнему элементу), и запускает обработчик для любых элементов вдоль этого пути, соответствующих селектору.

Я правильно говорю, что разница в том, что в моем первом примере событие привязано к #fish, но только прослушивает события, пузырящиеся из .buttons, тогда как во втором примере событие связано к каждому из .buttons? Если да, то каковы последствия этого?: S

Итак, если событие привязано к #fish, когда вы нажмете кнопку .button, есть ли вообще знать, на какой .button? это будет ссылаться на #fish, а не на .button, правильно?

Ответ 1

Пример # 1 свяжет событие для динамически создаваемых кнопок, если они являются потомками #fish. Любые кнопки, созданные после привязки, будут вызываться обработчиком кликов. Вы также можете привязать к $(document), если вам не нужен элемент предка.

Пример # 2 будет привязан только к кнопкам, которые находятся в DOM во время привязки. Любые динамически созданные элементы не получат обработчик.

В обоих примерах this и $(this) будут ссылаться на кнопку, которая была нажата, а не #fish.

Посмотрите на jsFiddle для демонстрации. Вы увидите на консоли, что this ссылается на кнопки не #fish.

$('#fish').on('click', '.button', function(){
    console.log(this.id);
});

Ответ 2

Да, это правильно. Когда вы вызываете метод on с помощью селектора, он создает делегированное событие.

$("#fish").on("click", ".button", function() {

делает то же самое, что:

$("#fish").delegate(".button", "click", function() {

Событие привязано к элементу #fish, но оно вызывает только обработчик событий для кликов на элементе .button. Это означает, что элемент .button не должен существовать, когда вы привязываете элемент, только элемент #fish.