Se llama a remove() en id main haciendo clic en otro botón externo. El problema es que si el usuario hace clic btn1 y presiona rápidamente ese botón externo, la eliminación se llama antes que el controlador de eventos para btn1 . Como resultado, la ventana emergente se carga después de que se eliminó el div. ¿Hay alguna forma de detener la solicitud de carga cuando se hace clic en el controlador de eventos para eliminar? Probé con jqXHR.abort() cuando se llama al método de eliminación, pero eso no funciona porque se llama a la eliminación incluso antes de que se envíe el ajax.
Hay muchos botones como btn1 que enviarán solicitudes ajax para cargar HTML y pocos archivos HTMlL, por ejemplo, a.html cargarán algunos archivos de script como a.js , que se ejecutarán. Y si el script hace referencia a alguna variable que se eliminó en remove() , habrá un TypeError.
<div id="base"> <div id="main"> <!-- some more HTML elements --> <button id="btn1"></button> </div> <div id ="popup"> </div> </div> <script> var xhr; $("#btn1").on("click", function(){ xhr = $.ajax( url: "a.html", success: function(){ //do something }), type: "GET" }); $("#main").on("remove", function(){ // delete all resources,etc. xhr.abort(); }); </script>Intenta usar una variable global
var removed = 0; $('externabutton').click(function(){ $("#main").remove(); removed = 1; }); $("#btn1").on("click", function(){ xhr = $.ajax( url: "a.html", success: function(data){ if (removed == 0 ) { //append the data } else {removed ==0;} }), type: "GET" });Como el xhr es asíncrono, no podemos garantizar que el xhr finalice antes del método #main.remove . Tal vez podrías usar una bandera para controlar esto.
var isRemoved = false, xhr; $("#btn1").on("click", function(){ if(isRemoved) return; xhr = $.ajax({ url: "a.html", success: function(){ //do something if(isRemoved) return; }, type: "GET" }); }); $("#main").on("remove", function(){ isRemoved = true; xhr && xhr.abort(); });