Anexando evento a elementos futuros usando jquery [duplicate]

Esta pergunta já tem uma resposta aqui:

Ligação de evento em elementos criados dinamicamente? 23 respostas

Estou usando o jquery 1.8 e tenho que exibir pop-up quando o usuário clica em alguma área com a classe suspensa-alternar. Anexei os eventos usando enquanto a página carrega pela primeira vez.

Aqui está

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

O que eu descobri que o segundo evento se aplica aos elementos adicionados no futuro, mas o primeiro não, ou seja, para um menu suspenso adicionado mais tarde, apenas "clique em alternar chamado" é impresso no console, mas para os elementos adicionados durante o início, ambos "clique em alternar chamado" e "alternância suspensa chamada" é impresso.

Qual é o problema aqui? On aplica-se apenas ao documento para o elemento futuro ou também pode ser aplicado à classe ou a outros elementos para que eles se apliquem a elementos futuros? Se não, qual é a solução?

questionAnswers(1)

yourAnswerToTheQuestion