将样式应用于包含jquery的html文件

Question

I am trying to perform a jquery load of a html page into the main body of a page.

Using a div named sidebar_menu that is in the middle of the page, i am performing a jquery load at the end(bottom) of the page.

    $("#sidebar_menu").load("/sitemenu.html");
    $("#sidebar_menu").page();

This kinda works... the content is displayed, but the menu does not have the javascript functionality (expand, collapse, etc) applied to it. The styles have been applied, but the functionality of the menu is not there.

I can copy the contents of the html in place of the div, and the menu operations work.

Am i loading the included file too late in the stack? currently using the

jQuery(document).ready(function(){
    $("#sidebar_menu").load("/sitemenu.html");
    $("#sidebar_menu").page();
});

but is there better area to load the html file into the DOM, as the .ready seems to be too late in the page assembly stack to be operational.

thank you

Answer 1

There are many JQuery methods that strip Javascript. I learned it the hard way. Look into that. It may not be the problem you are guessing. The way around it is to not get the JS generated on the server side but to have it on the client side with parameter, config, etc. values passed as some DATA- element values from the server side for some HTML elements. That string that you assign to DATA- can be a JSON string too.

Answer 2

You should use jQuery .on() method see http://api.jquery.com/on/

I am not sure how your code looks like. But here is the idea. Take the closest container (that exists in DOM) of the element that will be loaded (not in DOM at that moment) and on that asign selector and action for elements to be loaded.