На этот вопрос уже есть ответ здесь:

Я использую jquery 1.8 и должен отображать всплывающее окно, когда пользователь нажимает на область с классом dropdown-toggle. Я прикрепил события, используя on, пока страница загружается в первый раз.

Вот

$('.dropdown-toggle').on("click", function (e) {
console.log("dropdown toggle called");
$(this).next('.dropdown').toggle();
});
$(document).on("click", function (e) {
var target = e.target;
console.log("click toggle called");
if (!$(target).is('.dropdown-toggle') && !$(target).parents().is('.dropdown-toggle')) {
$('.dropdown').hide();
}
});

То, что я обнаружил, что второе событие применяется к элементам, добавляемым в будущем, но первое не относится, т. Е. Для выпадающего меню, добавляемого позже, в консоли печатается только «кнопка переключения», но для тех элементов, добавленных во время запуска, «кнопка переключения вызывается» и "выпадающий вызов называется" печатается.

В чем здесь проблема? Применяется ли on только к документу для будущего элемента или его можно применять также к классу или другим элементам, чтобы они применялись к будущим элементам? Если нет, каково решение?