The remove() on id main is called from clicking another external button. The problem is if the user clicks btn1 and quickly presses that external button, the remove is getting called before the event handler for btn1. As a result of which the popup is loaded after the div has been removed. Is there a way by which the load request can be stopped when event handler for remove is clicked? I tried with jqXHR.abort() when remove method is called,but that doesn't work because the remove is called before the ajax is even sent.
There are many buttons like btn1 which will send ajax requests to load HTML and Few HTMlL files for e.g a.html will load some script files like a.js, which will be executed. And if the script refers to some variable which was deleted in remove(), there will be a 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>
Try using a global variable
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"
});
As the xhr is async, so we cannot guarantee the xhr is finished before #main.remove method. Maybe you could use a flag to control this.
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();
});