I'm loading some HTML and JS with AJAX:
main-page.html loads vía AJAX a page called page-to-load.html.
<!-- main-page.html -->
<html>
...
<script>
$.ajax({
type:"POST",
url:"page-to-load.html",
success:function(data) {
$("#some_id").html(data);
}
});
</script>
...
</html>
page-to-load.html includes html and a js file:
<!-- page-to-load.html --->
<script src="scripts-for-this-html.js"></script>
<p>This is a HTML page working with above external .js file</p>
As you can see, i'm loading a js file, scripts-for-this-html.js
This works perfectly. The problem is that if I loaded again (I mean, "#some_id" gets empty and loaded with page-to-load.html again) all the script (scripts-for-this-html.js) remains in the browsers memory (for example, if I have an event in this .js file, this event gets repeated as many times I had loaded the file, even if i have deleted the script element from the DOM).
Is there any way to get this work? I don't want to include all the .js files at once (ther are too many), I want to loaded and unloaded them by demand.