With jquery.load() I'm loading some html into my page from a file which also contains javascript functions.
later I try to remove the html and the javascript using jquery.empty but it seems once the script is parsed by the browser I can't get rid of it, so I'm looking for suggestions on how to do this.
Below is the test source:
index.html
<head>
<script src="//code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
<script>
$(function(){
$('#loadEmbScrpt').click(function(){
$('#embDiv').load('http://maccyd10.hostoi.com/test.html');
});
$('#remEmbScrpt').click(function(){
$('#embDiv').empty();
});
});
<body>
<div id="embDiv"></div>
<div id="output"></div>
<input type="button" id="loadEmbScrpt" value="embed script into page"/>
<input type="button" id="remEmbScrpt" value="remove embedded script from page"/>
<input type="button" id="testButton" value="run embedded script test function"/>
</body>
test.html
<script>
$('#testButton').on('click',function(){
$('#output').append("<p>test</p>");
});
</script>
And here is a link to the above in action (I could not post this to jsfiddle due to XSS protection).
Have a play with this http://jsfiddle.net/6eWRQ/
As others have alluded to, the DOM and the Javascript VM are two separate systems within the browser.
The DOM is the browser's internal model of the HTML document to be rendered. It deals with HTML elements such as <script> and their position within the HTML document.
The Javascript VM deals with javascript code - it deals with running any Javascript code within <script> tags or pulled in from external js files.
it seems once the script is parsed by the browser I can't get rid of it
You can of course remove the <script> element from the DOM - but after the browser has parsed it this will have zero effect on the javascript VM - because then the javascript code inside the tag it has already been consumed and executed by the VM. Once the code has run, it cannot be un-run.
In the case of the example jsfiddle this is even clearer - removing a <script> element containing a function doesn't mean you can't call that function any more, once the code inside the <script> has already been executed by the VM. The VM has its own internal model of the function and changes to the original code in the DOM after it has been executed are simply irrelevant to it.
Removing the containing <script> element from the DOM using javascript is effectively pointless in this situation - it's just redundant. The DOM rendering engine has no use for it because it's not a visual element, and the javascript VM has no use for it because it's already-processed input.
To do what you want you should remove the #remEmbScrpt button, and instead use the following to undo the binding performed by the loaded script:
$('#testButton').off('click');
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments