how to use jQuery on() in dynamically loaded scripts

Question

If I have the following html:

<html>
   <div id="main_content">
      <button>click me</button>
      <script src="main.js" ></script>
   </div>
</html>

And main.js:

$('#main_content').on('click', 'button', function() {
    console.log('you clicked');
});

If I do a full page load, then clicking the button only registers one console message. If, however I subsequently re-load main_content's contents via an AJAX request then each button click gives 2 console messages. It will give 3,4,5... messages for each subsequent AJAX load, but always one for a full page reload.

Might someone explain this behavior and suggest possible solutions?

move the script into the head, or at the really bottom of the body. — Bergi
– Bergi, Commented Jun 20, 2012 at 21:50

Nicola Peluchetti · Accepted Answer · 2012-06-20 21:48:45Z

5

That's because you are loading multiple copies of main.js and thus you are attaching one more event handler each time.
Every time you load the <script> one more handler is attached

 <button>click me</button>
  <script src="main.js" ></script>

The lesson here is that script loaded by ajax are parsed and so if you have handlers in them they are attached

answered Jun 20, 2012 at 21:48

Nicola Peluchetti

77k32 gold badges151 silver badges197 bronze badges

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

6 Comments

tim peterson Over a year ago

-@Nicola, can you explain your last sentence a little more. Full page loaded scripts aren't "parsed"? The difference in handling of the <script> tags between regular page loads vs. AJAX confuses me.

Nicola Peluchetti Over a year ago

@timpeterson yes sure on full page load they are parsed too, i was simply saying that if you load a script tag by ajax the script is parsed :)

tim peterson Over a year ago

still confused by what you are calling parsed, one more time please?

Jasper Mogg Over a year ago

it effectively 'runs' the script each time you re-load it via AJAX.

Nicola Peluchetti Over a year ago

@timpeterson i mean the the main.js script is loaded every time, is parsed by the browser (executed) and if you have any event handlers in it they are attached

|

Esailija · Accepted Answer · 2012-06-20 21:50:16Z

3

If you really need to reload that script all the time, then do this in it:

$('#main_content').off("click").on('click', 'button', function() {
    console.log('you clicked');
});

Otherwise put it somewhere else obviously.

answered Jun 20, 2012 at 21:50

Esailija

140k24 gold badges280 silver badges328 bronze badges

1 Comment

tim peterson Over a year ago

thanks I hadn't thought of off(). Sometimes loading that script is just laziness on my part in testing things but yeah I usually put this type of code elsewhere.

raina77ow · Accepted Answer · 2012-06-20 21:55:23Z

I suppose you placed that script into the reloaded content and not within the head section, where all scripts usually reside, because event handler becomes detached from the #main_content each time it's reloaded? Well, there's another way:

$(function(){
   ...
   $('body').on('click', '#main_content', function() { console.log('You clicked!'); });
});

You can place, load and execute this code just once - and won't need to reattach the event each time the block in question is reloaded.

Take note, though, that body in my code is better be replaced with a more specific element - in a perfect world, direct parent of #main_content element.

UPDATE: this is so called event delegation, and it's very well described in the .on docpage. In the previous versions of jQuery, you had to use either .live or .delegate methods.

jfriend00 · Accepted Answer · 2012-06-20 22:05:30Z

As has already been said, main.js is getting reparsed and rerun each time you do a .load().

You have a couple of options to solve this:

Move main.js outside of the dynamically loaded content so it isn't reparsed and run each time you do a .load().
Modify main.js so the whole script only executes once.
Modify main.js to aware of being loaded multiple times so it protects against repeatedly installing the same event handlers.

These are presented in order of simplicity of implementation.

For option 2, you could put all of main.js in an if statement like this so that it only ever gets executed once:

if (!window.__main__js__defined) {
    window.__main__js__defined = true;

   // rest of main.js code here

}

For option 3, you'd have to protect each individual event handler that you wanted anti-dup protection with, probably using .data() on each object to set a flag that you'd already installed a given event handler.

Collectives™ on Stack Overflow

how to use jQuery on() in dynamically loaded scripts

4 Answers 4

6 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related