Using jQuery.on() vs. loading script when content loads

Question

When loading content inside of a modal box or lightbox, is it better to hook up needed events and scripts through the use of jQuery.on(), or have it load with the content by a script tag?

For example, with the .on() solution:

$('#blah').on('load', function() {
    $('#something').click(function() { alert('Hi'); });
});

And then when the modal box was loaded, it would call $('#blah').trigger('load')

Or, just simple have the the script loaded in with the HTML as in:

<div id="blah">
    <a href="#" id="something">Something</a>
</div>
<script src="/js/blah.js"></script>

With blah.js containing the javascript code above involving setting up the click event on #something. I've used the .on() method for a while, but I wasn't sure if this was the best way to handle this.

Domenic · Accepted Answer · 2011-12-14 02:23:24Z

2

Argument for the script inclusion solution

The on solution is ugly and involved. It requires more code than the simple script inclusion, and mixes up concerns between the load handling code (which is presumably somewhere else) and the lightbox contents. Why should that code know about the ids of elements inside the lightbox?

Argument for the on solution

It involves one less HTTP request and so will probably be faster.

answered Dec 14, 2011 at 2:23

Domenic

113k42 gold badges227 silver badges275 bronze badges

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

Comments

jfriend00 · Accepted Answer · 2011-12-14 02:29:52Z

1

The way .on() was designed, you would set up the event handler first like this:

$("#blah").on('click', "#something", function() { alert('Hi'); });

Then, when you load the content in #blah, your event handler will automatically work for the #something element and you don't need a .load() handler.

The way this works is jQuery sets up an event handler on #blah. That event handler examines any click events that bubble up to it and when it sees one that has a target that was on an object that matches the selector #something, it fires the event. The #something can come and go as much as it wants because the actual event handler is on the parent object that exists the whole time.

Using this method, you would not need the extra blah.js file.

answered Dec 14, 2011 at 2:29

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

2 Comments

intargc Over a year ago

What about instance where you need to hook up validation on a form with the validator plugin? This has to execute once the form is fully rendered. So it would need to know when the content is loaded fully before executing the $('form').validate() method, right?

jfriend00 Over a year ago

If you have code that doesn't use or can't be configured to use delegated event handlers, then obviously you have to run that code after the objects are created. If you were using this identical form in lots of different places, you might put it's code in a secondary blah.js file and load that as needed, but if you're only using it in a small number of places that all share common JS files anyway, I'd just put it in those common JS files and avoid the extra JS file that has to be loaded.

Collectives™ on Stack Overflow

Using jQuery.on() vs. loading script when content loads

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related