Случай 1 (прямой):

$("div#target span.green").on("click", function() {...});

== Привет! Я хочу, чтобы каждый span.green внутри цели div # слушал: когда вы нажимаете, делайте X.

Случай 2 (делегированный):

$("div#target").on("click", "span.green", function() {...});

== Привет, div # target! Когда щелкают по любому из ваших дочерних элементов, которые являются "span.green", сделайте X с ними.

Другими словами ...

В случае 1 каждому из этих пролетов были даны индивидуальные инструкции. Если будут созданы новые диапазоны, они не услышат инструкции и не будут реагировать на щелчки. Каждый диапазон непосредственно отвечает за свои события.

В случае 2 указание дано только контейнеру; он отвечает за обнаружение кликов от имени своих дочерних элементов. Работа по отлову событий была делегирована. Это также означает, что инструкция будет выполняться для дочерних элементов, которые будут созданы в будущем.

Первый способ, $("div#target span.green").on(), связывает обработчик кликов непосредственно с диапазоном (ами), который соответствует селектору в момент выполнения кода. Это означает, что если позже будут добавлены другие промежутки (или их класс будет изменен для соответствия), они пропущены и не будут иметь обработчика кликов. Это также означает, что если вы позже удалите «зеленый» класс из одного из диапазонов, его обработчик кликов продолжит работу - jQuery не отслеживает, как был назначен обработчик, и проверяет, соответствует ли селектор.

Второй способ, $("div#target").on(), связывает обработчик кликов с совпадающими div (-ами) (опять же, это против тех, которые совпадают в этот момент), но когда щелчок происходит где-то в div, функция обработчика будет запущена только в том случае, если щелчок произошел не только в div, но и в дочернем элементе, соответствующем селектору во втором параметре .on(), "span.green". Выполнено таким образом, не имеет значения, когда были созданы эти дочерние промежутки, щелчок по ним все равно запустит обработчик.

Таким образом, для страницы, которая не добавляет или не изменяет свое содержимое динамически, вы не заметите разницы между этими двумя методами. Если вы динамически добавляете дополнительные дочерние элементы, второй синтаксис означает, что вам не нужно беспокоиться о назначении им обработчиков кликов, потому что вы уже сделали это один раз для родительского элемента.

Объяснение N3dst4 прекрасно. Исходя из этого, мы можем предположить, что все дочерние элементы находятся внутри body, поэтому нам нужно использовать только это:

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

Он работает с прямым или делегированным событием.

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

• Связанный относится к тому, что осталось от .on.
• Выбрано относится ко второму аргументу .on().

Делегирование не работает как .find (), выбирая подмножество связанных элементов. Селектор применяется только к строгим дочерним элементам.

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

сильно отличается от

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

В частности, чтобы получить преимущества, на которые указывает @ N3dst4 с «элементами, которые будут созданы в будущем», связанный элемент должен быть постоянным родительским элементом. Затем выбранные дети могут приходить и уходить.

РЕДАКТИРОВАТЬ

Контрольный список того, почему делегированный .on не работает

Коварные причины, по которым $('.bound').on('event', '.selected', some_function) может не работать:

1. Связанный элемент не является постоянным. Он был создан после вызова .on()
2. Выбранный элемент не является правильным потомком связанного элемента. Это тот же элемент.
3. Выбранный элемент предотвратил всплытие события в связанный элемент, вызвав .stopPropagation().

(Опуская менее сложные причины, такие как неправильный выбор селектора.)

Написал пост со сравнением прямых и делегированных мероприятий. Я сравниваю чистый js, но он имеет то же значение для jquery, который только инкапсулирует его.

Вывод состоит в том, что делегированная обработка событий предназначена для динамической структуры DOM, где связанные элементы могут быть созданы, пока пользователь взаимодействует со страницей (нет необходимости снова связывать), а прямая обработка событий предназначена для статических элементов DOM, когда мы знаем, что структура не изменится.

Для получения дополнительной информации и полного сравнения - http://maciejsikora.com/standard-events-vs-event-delegation/

Использование всегда делегированных обработчиков, которые, как я вижу, в настоящее время очень модно, - неправильный путь, многие программисты используют его, потому что «его следует использовать», но правда в том, что прямые обработчики событий лучше для некоторых ситуаций и выбор того, какой метод следует использовать. знанием различий.

Случай 3 (делегированный):

$("div#target").delegate("span.green", "click", function() {...});