Can I have multiple jquery .load() event in one page?

Question

Is this possible? I've got one jquery file that is loaded in every page that uses the .load() event, but then a few select pages also require some specific jquery stuff where I'd like to use .load() again. Thanks for reading.

Answer 1

Yep, that's no worries.

The events will run in the order they were defined:

$(function() {
  $('body').append('<span>A</span>');
});
$(function() {
  $('body').append('<span>B</span>');
});
$(function() {
  $('body').append('<span>C</span>');
});

The above would append "ABC" to the page.

Interestingly, if you use the long-hand method, it completes in a different order:

$(function() {
  $('body').append('<span>A</span>');
});
$(document).ready(function() {
  $('body').append('<span>B</span>');
});
$(function() {
  $('body').append('<span>C</span>');
});

This outputs "ACB"

Even more confusingly, if you only use the longhand, then it appears as though the first handler runs last and the rest in order:

$(document).ready(function() { /* A */ });
$(document).ready(function() { /* B */ });
$(document).ready(function() { /* C */ });
$(document).ready(function() { /* D */ });
$(document).ready(function() { /* E */ });
// BCDEA