Call Relevant Js Library On Click Of Each Menu's Elements Before Jquery Load Function

I try to load my content with jquery load function in to the index.html's content area. I succeed with that but my js are not working. So I want to call them on each click of my me

Solution 1:

I'm not sure if this is causing your issue, but for all four of the URLs that you are trying to load into the #content div, the content starts out with <div id="content">. You should remove that from the content, since it is getting loaded into <div id="content"></div>. Otherwise, you end up with:

<div id="content">
    <div id="content">
    ...
    </div>
</div>

Note that the .load() function does not replace the element it is called on, it inserts the returned html into it's body.

Here is what I see in Firefox when I inspect your page after the content/aboutme.html content is loaded:

Also, if the content you are loading needs to be instrumented with dynamic behavior, you may need to instrument it after inserting it into the DOM. In that case, you need to pass a callback function to the .load() function.

$('#content').load(url, function(responseText, textStatus) {
    if (textStatus == "success") {
        // Instrument the dynamic behavior of the elements just inserted into// the #content div here.carouselfn();
    }
});

Solution 2:

It sounds to me like you are trying to dynamically load html and javascript. When you use any method of dynamically loading content, including .load(), it only loads static content, meaning it will not parse and execute any javascript that you try to load.

Furthermore, there is no cross-browser way to load and execute javascript dynamically after the page has loaded unless you use eval, which is not recommended.

I would recommend including all of your javascript in the main index.html page, then loading just the html from your other pages dynamically, and then calling your javascript functions needed for that dynamic content.

Edit: You need to call your library's javascript functions after the html has finished loading. So you would need to supply a callback to the .load() function:

$('#content').load(
    $(this).attr('href'),
    function () { /* javascript calls here */ }
);