Pierwszy sposób, $("div#target span.green").on(), wiąże funkcję obsługi kliknięć bezpośrednio z zakresami pasującymi do selektora w momencie wykonania kodu. Oznacza to, że jeśli inne przęsła zostaną dodane później (lub zmienią ich klasę na dopasowaną), zostaną one pominięte i nie będą miały obsługi kliknięć. Oznacza to również, że jeśli później usuniesz" zieloną " klasę z jednego z zakresów, jej obsługa kliknięć będzie nadal działać - jQuery nie śledzi sposobu przypisania obsługi i sprawdza, czy selektor nadal zapałki.

Drugi sposób, $("div#target").on(), wiąże funkcję obsługi kliknięć z div(s), które pasują (ponownie, jest to w stosunku do tych, które pasują w tym momencie), ale gdy nastąpi kliknięcie gdzieś w div, funkcja obsługi zostanie uruchomiona tylko wtedy, gdy kliknięcie nastąpiło nie tylko w div, ale w elemencie potomnym pasującym do selektora w drugim parametrze do .on(), "span.zielony". W ten sposób nie ma znaczenia, kiedy te przęsła potomne zostały utworzone, kliknięcie na nich nadal uruchomi funkcję obsługi.

Więc w przypadku strony, która nie dodaje dynamicznie ani nie zmienia swojej zawartości, nie zauważysz różnicy między tymi dwiema metodami. Jeśli dynamicznie dodajesz dodatkowe elementy potomne, druga składnia oznacza, że nie musisz się martwić o przypisanie do nich programów obsługi kliknięć, ponieważ zrobiłeś to już raz na rodzicu.

Wyjaśnienie N3dst4 jest doskonałe. Na tej podstawie możemy założyć, że wszystkie elementy potomne znajdują się wewnątrz ciała, dlatego musimy używać tylko tego:

$('body').on('click', '.element', function(){
    alert('It works!')
});

Działa z wydarzeniem direct lub delegate.

Styczna do OP, ale koncepcja, która pomogła mi rozwikłać zamieszanie z tą cechą jest to, że powiązane elementy muszą być rodzicami wybranych elementów.

• Bound odnosi się do tego, co pozostało z .on.
• Selected odnosi się do drugiego argumentu .on().

Delegacja nie działa jak .find(), wybierając podzbiór powiązanych elementów. Selektor ma zastosowanie tylko do ścisłych elementów potomnych.

$("span.green").on("click", ...

Jest bardzo różne od

$("span").on("click", ".green", ...

W szczególności, aby uzyskać zalety podpowiedzi @N3dst4 z "elementami, które są tworzone w przyszłości", związany element musi być stałym rodzicem. Następnie wybrane dzieci mogą przychodzić i odchodzić.

EDIT

Lista kontrolna dlaczego delegowane .on nie działa

Trudne powody, dla których $('.bound').on('event', '.selected', some_function) mogą nie działać:

1. element związany nie jest stałym . Został utworzony po wywołaniu .on()
2. wybrany element nie jest właściwym dziecko elementu związanego. To ten sam element.
3. wybrany element uniemożliwia bąbelkowanie zdarzenia do powiązanego elementu przez wywołanie .stopPropagation().

(pomijając mniej zawiłe powody, takie jak źle napisany selektor.)

I wro te post z porównaniem zdarzeń bezpośrednich i delegowanych. Porównuję czysty js, ale ma to samo znaczenie dla jquery, które tylko go enkapsuluje.

Wniosek jest taki, że delegowana obsługa zdarzeń jest dla dynamicznej struktury DOM, gdzie można tworzyć powiązane elementy podczas interakcji użytkownika ze stroną( nie ma potrzeby ponownego wiązania), a bezpośrednia obsługa zdarzeń jest dla statycznych elementów DOM, gdy wiemy, że struktura nie ulegnie zmianie.

Aby uzyskać więcej informacji i pełne porównanie - http://maciejsikora.com/standard-events-vs-event-delegation/

Używanie zawsze delegowanych programów obsługi, które jak widzę są obecnie bardzo modne, nie jest w porządku, wielu programistów używa go, ponieważ "powinno być używane", ale prawda jest taka, że bezpośrednie programy obsługi zdarzeń są lepsze w jakiejś sytuacji i wybór, Która metoda powinna być poparta wiedzą o różnicach.