I'm creating a single page application with JQuery load() method.
The situation is, every PHP file I load with jquery has a JS inside it,
The problem is the JS inside every PHP app keeps using even though it was overridden when i load another file inside the same element. and it gives me some conflict with every file i loaded since the js are used interchangeably.
take it as an example:
file1.php
<input id="supplier" name="supplier" onblur="highlight()">
<script>
function highlight(){}
</script>
file2.php
<input id="supplier" name="supplier" onblur="highlight()">
<script>
function highlight(){}
</script>
PROBLEM: file1.php js still executed on file2.php same with file2.php to file1.php even though file1 is overridden with file2 with jquery load
is there a way to clean a jquery inside the element which I had overridden?
According to the jQuery.load documentation, passing a selector to the load method will remove all the scripts.
http://api.jquery.com/load/#script-execution
$('.my-element').load('my-php-file.php #supplier');