CODEWITHSUNDEEP
javascriptjquery
tcd
tcd

Reputation: 1605

Changing <script> tag dynamically with jQuery

I've been trying to figure out if it's possible to dynamically change the src of a <script> tag (or load a new script tag) and have the previous script no longer execute. Example below:

index.html

<button id="action">Click</button>

<script id="javascript-file-script" type="text/javascript" src="/js/oldjsfile.js"></script>
<script type="text/javascript">
    $(document).ready(function() {

        $("#javascript-file-script").remove();

        setTimeout(function() {
            $('body').append('<script id="javascript-file-script" src="/js/newjsfile.js" type="text/javascript"><\/script>')
        }, 100);

    });
</script>

oldjsfile.js

$(document).ready(function() {

    console.log('old file loaded');

    $('#action').click(function() {
        alert('old');
    });

});

newjsfile.js

$(document).ready(function() {

    console.log('new file loaded');

    $('#action').click(function() {
        alert('new');
    });

});

Before changing the javascript file, clicking on #action would have 1 alert "old". Once I change the script, and click on #action I get both alerts "old" and "new". Is there a way to "unload" the previous file so that the original click function is removed/not executed?

I'm looking for a solution other than changing ids or editing the scripts. I'm thinking this isn't possible because the script is already in memory.

Upvotes: 0

Views: 437

Answers (2)

Bob
Bob

Reputation: 387

To begin, you definitely do not want to load and unload scripts as that will cause other problems and loading scripts should be done asynchronously.

For your first event, you did everything fine.

For the second event, it has to happen when something else happens. In my snippet below, I created another button and when that was clicked it took off the old event and added the new one. This doesn't have to happen on button click it can be on anything but you have to remove the old event with unbind and create a new one just like you did originally.

To try the example below, click the first button and you'll see an alert of 'old'. Then click on the second button and click on the first button again and you'll see 'new'.

$(document).ready(function () {

  // The original click event.
  $('#action').click(function () {
      alert('old');
  });
  
  // Let's set up a reference to our new button which will cause the #action click to change.
  $('#changeAction').click(function () {
      
      // Unbind the previous click event associated with #action:
      $('#action').unbind('click');
      
      // Create the new click event.
      $('#action').click(function () {
          alert('new');
      });
      
  });
  
});
<button id="action">Click</button>

<button id="changeAction">Click me to change the action of the first button</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Upvotes: 1

Daniel A. White
Daniel A. White

Reputation: 190976

That isn't possible. It is already loaded and running. You should consider using .on and .off for binding to the click event.

Upvotes: 1

Related Questions