Changing <script> tag dynamically with jQuery

Question

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.

"I'm thinking this isn't possible because the script is already in memory." -Im thinking you're right - don't forget that variables and functions are hoisted. — user8871181
– user8871181, Commented Sep 27, 2018 at 2:38
Your new script can do cleanup to some extend but not entire memory, its more like un-registered event listeners — user2575725
– user2575725, Commented Sep 27, 2018 at 2:48

Daniel A. White · Accepted Answer · 2018-09-27 02:38:06Z

1

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

answered Sep 27, 2018 at 2:38

Daniel A. White

192k49 gold badges389 silver badges473 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Bob · Accepted Answer · 2018-09-27 02:43:42Z

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>

Collectives™ on Stack Overflow

Changing <script> tag dynamically with jQuery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related