Question

How come this doesn’t work in loading header content…

(function ($) {
    var mheaderwrapper = '<div id="header"></div><div class="header-menu"></div>';
    var mheadercontent = '/shop/Pages/global_header.html';
    var mmenucontent = '/shop/Pages/global_megamenu.html';
    var mjqueryhover = 'js/jquery.hoverIntent.minified.js';
    var mjquerymenu = 'js/jquery.custom-menu.js';
    $('#wrapper').prepend(mheaderwrapper);
    $('#header').load(mheadercontent);
    $('.header-menu').load(mmenucontent, function(){
       $.getScript(mjqueryhover);
       $.getScript(mjquerymenu);
    });
})(jQuery);

but this does…

  $.mheader = function() {
    var mheaderwrapper = '<div id="header"></div><div class="header-menu"></div>';
    var mheadercontent = '/shop/Pages/global_header.html';
    var mmenucontent = '/shop/Pages/global_megamenu.html';
    var mjqueryhover = 'js/jquery.hoverIntent.minified.js';
    var mjquerymenu = 'js/jquery.custom-menu.js';
    $('#wrapper').prepend(mheaderwrapper);
    $('#header').load(mheadercontent);
    $('.header-menu').load(mmenucontent, function(){
       $.getScript(mjqueryhover);
       $.getScript(mjquerymenu);
    });
   }

$(function() {
  $.mheader();
});

Answer 1

This :

(function ($) {....})(jQuery);

executes immediately, and only maps jQuery to $ to make sure the dollar sign really is “jQuery” within the self executing function. It’s not a “DOM ready” function.

This:

$(function() {....});

will wait until the DOM is ready before any code is executed.

You can use the second one inside the first one :

(function ($) {
    $(function() {
        //code here
    });
})(jQuery);

to do both!