How do I add a function to HTML code that was loaded using .load

Question

I am loading a snippet of HTML using .load(). It works fine:

$( "#main-nav header nav" ).load( "main-nav.html" );

However I then want to add a function to this. I'm using the meanmenu plugin. It almost works but not quite:

$( "#main-nav header nav" ).load( "main-nav.html" ).meanmenu({meanScreenWidth: "790"});

Here's how it goes:

1- The drop down menu is setup for a window size of around 800px 2- The hamburger menu appears when you load a page with that window size. However the drop down functionality does not work. 3- If you make the window larger and then make it smaller again, everything works fine. 4- When I remove the load() function and just place the html directly in the page, everything works fine.

In other words, there may be a problem with the plugin but I'm not sure if I'm doing something wrong in jquery. Basically, the plugin function is attached to the HTML after the HTML snippet is retrieved through load().

After looking through the results more thoroughly, it appears as though the HTML is not being loaded until after I slightly resize the window from smaller (400px width), to larger (402px). When I put it back at 400px width, the menu still works because the HTML is now loaded.

Answer 1

You need to take advantage of the callback function the .load() function provides. http://api.jquery.com/load/

e.g.

$("#main-nav header nav").load("main-nav.html", function(){
  $(this).meanmenu({meanScreenWidth: "790"});
});