...

View Full Version : jQuery .load() - new content not using the jQuery



bphein1980
10-13-2010, 07:08 PM
$(document).ready(function(){
// objFile = path to file
// objLoad = ID of div/span/etc I want new content loaded in
function loadContent(objFile, objLoad){
$("#"+objLoad).load(objFile);
}

// all nextpage classes should use the loadContent function
$(".nextpage").click(function(e){
e.preventDefault();
loadContent($(this).attr('href'), $(this).attr('load'));
});
});


Example usage:
<div id="response">
<a href="page1.cfm" class="nextpage" load="response">Go to page 1</a>
</div>

Contents of page1.cfm:
You are on page1.
<a href="page2.cfm" class="nextpage" load="response">Go to page 2</a>

Clicking "go to page 1" works fine and loads page1.cfm content into the "response" div. However when I click on "go to page 2", it uses the default behavior and just redirects the browser instead of using the jQuery loadContent() function.

Why? and how to get content inserted via .load() to "use" the jQuery?

Thanks!

Zefris
10-14-2010, 01:19 AM
Assuming that is all you have in "Contents of page1.cfm", you're missing a

<div id="response"></div> :S

SB65
10-14-2010, 09:04 AM
I think, assuming that your html includes the following on load:


<div id="response">
<a href="page1.cfm" class="nextpage" load="response">Go to page 1</a>
</div>


that the click event is attached to this anchor fine, since it's present when the DOM loads, and click() will attach to any current element. But then the next "page 2" anchor element is only introduced via the first click event, and hence the click event is not attached. You can fix this by using live(), which will attach the click event to any current or future element:


$(".nextpage").live("click",function(e){
e.preventDefault();
loadContent($(this).attr('href'), $(this).attr('load'));
});

bphein1980
10-14-2010, 02:57 PM
Thank you both! Each was part of the solution. :thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum