Para o aplicativo da web ajax que possui muitas telas e navegações, para anexar manipuladores de eventos para div ou links ou botões, podemos codificar como:

//Using $.on inside Ajax success handler

$("#container").on("click", "#selector", function(event){

});

Essa abordagem NÃO funcionará se o contêiner não existir no DOM. Para fazê-lo funcionar, terá que usar documento ou corpo como contêiner, o desempenho pode não ser bom.

Pode haver muitas linhas de código no manipulador de sucesso do Ajax. Para organizar melhor, pode mover o código para uma função e chamar essa função no manipulador de sucesso do Ajax. Mas temos que fazer muitas funções de eventos de registro para todas as permutações e combinações.

Registre a confusão de código de funções.

Se o manipulador de eventos já estiver registrado, o registro novamente causará dois manipuladores pares. Portanto, temos que cancelar o registro e registrar (OU anexar somente se não estiver conectado) - Não tenho certeza sobre o problema de desempenho.

Alguma alternativa?

Estou pensando em seguir:

Mantenha um mapa de contêiner, destino e clique em manipulador de eventos em um local para um módulo.

No manipulador de eventos global ajaxComplete, se xhr.responseHTML tiver o contêiner, anexar o manipulador de eventos aos elementos de destino (anexar somente se não estiver anexado).

$(document).ajaxComplete(function(e, xhr, settings){
   for(ind in clickEventListeners){eventlistner = clickEventListeners[ind];
    if($(eventlistner.container,xhr.responseHTML).length > 0){
      $(eventlistner.target).on("click",function(){
      eventlistner.processor(this);
      });
  }
 }
});

Prós: Todos os manipuladores de eventos documentados em um lugar para um módulo. Nenhum código confuso para cada manipulador de sucesso do ajax.

Contras: não tenho certeza se algum.

Por favor, informe se alguma sugestão.