Esta pregunta ya tiene una respuesta aquí:

Estoy usando jquery 1.8 y tengo que mostrar una ventana emergente cuando el usuario hace clic en un área con el menú desplegable de clase. He adjuntado los eventos usando on mientras la página se carga por primera vez.

Aquí es

$('.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();
}
});

Lo que encontré en el segundo evento se aplica a los elementos agregados en el futuro, pero el primero no lo hace, por ejemplo, para un menú desplegable agregado más adelante, solo se imprime en la consola "haga clic en el conmutador", pero para aquellos elementos agregados durante el inicio, ambos "haga clic en el conmutador llamado" y se imprime "alternar llamada".

¿Qué problema hay aquí? ¿Se aplica solo al documento para el elemento futuro o se puede aplicar a la clase u otros elementos también para que se apliquen a los elementos futuros? Si no, ¿cuál es la solución?