CODEWITHSUNDEEP
javascriptjquery
brianrhea
brianrhea

Reputation: 3724

jQuery .load() not working when called from loaded content

My primary navigation [Our Clients, Our Culture, Our People] uses .load() to pull the content and display it in a div on the same page w/o refresh.

I would like for links within the new content to do the same, just display whatever content is being referenced in this same div. However, when they're clicked it goes directly to the new page.

$(function(){
    $("a.aboutContent").click(function (e) {
        e.preventDefault();
        $("#aboutContainer").load($(this).attr("href"));
    });
});

So, when <a href="ourpeople.htm" class="aboutContent">Our People</a> is clicked, it pulls ourpeople.htm in to the #aboutContainer div. If you click on a link inside of ourpeople.htm, I'd simply like for that content to display in the same #aboutContainer div. I'm assigning the aboutContent class to links in the subpages as well, but it still isn't working.

Upvotes: 1

Views: 583

Answers (2)

Scoobler
Scoobler

Reputation: 9709

You will need to use .live() to listen to clicks from everything, including new DOM elements:

$(function(){
    $("a.aboutContent").live('click', function (e) {
         e.preventDefault();
         $("#aboutContainer").load($(this).attr("href"));
     }); 
});

The reason for doing this is, jQuery code runs when the page is ready - it will attach a click handler to every dom anchor with the class aboutContent - when you load new content, those elements where not there when the page was ready, so never have a click handler attached to them.
Using .live() takes care of that for you. Alternatively, you could place your code in a function, and run that function when the new content is loaded, that way when it runs, it will attach a click handler and the DOM elements will be there, trouble with this is, you would have to mark elements as already having a click handler, or you would end up adding x number of click handlers to some elements.

Upvotes: 2

jatanp
jatanp

Reputation: 4092

Probably you can return false from click handler to prevent browser to exeucte HREF on its own.

Like,

 $(function(){
    $("a.aboutContent").click(function (e) {
        e.preventDefault();
        $("#aboutContainer").load($(this).attr("href"));
        return false;
    });
});

Otherwise I would suggest to call some javascript function on href using href="javascript:clickhandler('')"

Upvotes: 0

Related Questions