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.

Answer 1

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.