Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Feb 2005
    Posts
    136
    Thanks
    0
    Thanked 0 Times in 0 Posts

    .load() - new content not using the jQuery

    Code:
    $(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!
    Last edited by bphein1980; 10-13-2010 at 07:29 PM. Reason: selecting prefix for jQuery

  • #2
    New Coder
    Join Date
    Jun 2005
    Posts
    52
    Thanks
    0
    Thanked 4 Times in 4 Posts
    Assuming that is all you have in "Contents of page1.cfm", you're missing a
    Code:
    <div id="response"></div>
    :S

  • #3
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    I think, assuming that your html includes the following on load:

    Code:
    <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:

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

  • #4
    Regular Coder
    Join Date
    Feb 2005
    Posts
    136
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you both! Each was part of the solution.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •