jQuery na() selektorze

Question

Jaki jest cel metody selector w metodzie jQuery on()?

W jakiej sytuacji jest

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

lepiej niż, powiedzmy,

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

?

Szukałem na jQuery documention Znalezione

Jeżeli selektor jest pominięty lub null, obsługi zdarzeń jest określany jako bezpośredni lub bezpośrednio związany. Program obsługi wywoływany jest za każdym razem, gdy zdarzenie występuje na wybranych elementach, niezależnie od tego, czy występuje bezpośrednio na elemencie, czy też w bąblach z elementu potomnego (wewnętrznego).

Po udostępnieniu selektora procedura obsługi zdarzenia jest określana jako delegowana. Program obsługi nie jest wywoływany, gdy zdarzenie występuje bezpośrednio na elemencie bound, ale tylko dla potomków (elementów wewnętrznych) pasujących do selektora. jQuery pę dza zdarzenie od celu zdarzenia do elementu, do którego jest podłĘ ... czony handler (tj. od najbliższego do najbardziej oddalonego elementu) i uruchamia program obsługujĘ ... cy wszystkie elementy wzdłuż tej ś cieżki pasujĘ ... ce do selektora.

mam rację, mówiąc, że różnica jest taka, że ​​w moim pierwszym przykładzie, zdarzenie jest związane z #fish, ale słucha tylko na imprezy propagacji znad .buttons, natomiast w drugim przykładzie zdarzenie jest zobowiązany do każdy z .buttons? Jeśli tak, jakie są tego konsekwencje? : S

Więc jeśli wydarzenie jest powiązane z #fish, po kliknięciu przycisku., Czy jest i tak, aby wiedzieć, który przycisk .Button został kliknięty? będzie to dotyczyło raczej #fish niż przycisku., prawda?

Answer 1

Przykład # 1 spowoduje powiązanie zdarzenia dla dynamicznie tworzonych przycisków, o ile są one potomkami #fish. Każdy przycisk utworzony po powiązaniu będzie miał wywoływany moduł obsługi kliknięcia. Możesz także powiązać z $(document), jeśli nie chcesz wybrać elementu nadrzędnego.

Przykład # 2 będzie wiązał tylko przyciski, które znajdują się w DOM w momencie wiązania. Wszelkie dynamicznie tworzone elementy nie otrzymają obsługi.

W obu przykładach this i $(this) będą odnosić się do przycisku, który został kliknięty, a nie #fish.

Zobacz demo na ten temat: jsFiddle.Zobaczysz w konsoli, że this odnosi się do przycisków nie #fish.

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

Answer 2

Tak, zgadza się. Po wywołaniu metody on za pomocą selektora tworzy delegowane zdarzenie.

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

działa tak samo jak:

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

Impreza jest związany z elementem #fish, ale to tylko wywołuje procedurę obsługi zdarzenia kliknięcia na elemencie .button. Oznacza to, że element .button nie musi istnieć po związaniu elementu, tylko element #fish.