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

Question

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.

Scoobler · Accepted Answer · 2011-03-09 22:33:55Z

2

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.

edited Mar 9, 2011 at 22:33

answered Mar 9, 2011 at 22:22

Scoobler

9,7494 gold badges39 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

brianrhea Over a year ago

Thanks for the assist Scoobler. Worked perfect, answer accepted

jatanp · Accepted Answer · 2011-03-09 22:22:19Z

0

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('')"

answered Mar 9, 2011 at 22:22

jatanp

4,1424 gold badges44 silver badges48 bronze badges

1 Comment

Scoobler Over a year ago

return false; is doing what e.preventDefault() is doing, but e.preventDefault() is the cross browser compatible way of doing the same thing. Unless I am mistaken?

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related