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
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts

    Jquery - reattach event handlers after AJAX update?

    I think this may be a simple question, hopefully it's just my poor syntax understanding.

    I'm attaching event handlers to some links inside comment boxes like so:

    Code:
    $(".comments_previous, .comments_next").click(function(){
    	
    	var oCommentDiv = $(this).parent().parent();
    	
    	iCommentId = 1;
    	sDirection = 'prev';
    
    	$.get("ajax_getcomment.asp", { commentid: iCommentId, direction: sDirection },function(data){
    		oCommentDiv.html(data);
    	});
    
    	// reattach event handlers to newly-generated links.
    	//$(".comments_previous, .comments_next").click();
    	
    	return false;
    });
    So. Someone clicks a link inside a div, and the content of that div is updated with the results of an AJAX call. That bit currently works fine.

    The HTML that is passed back in that AJAX call also contains some links. And I want exactly the same thing to happen when they're clicked: AJAX is fired, container div is updated.

    But I don't know how to attach the event handlers to those links that have just been added. I know I need to call the event-attaching bit again - as shown in the highlighted code above - but I don't know what I should be passing as the function arguments.

    Can anyone enlighten me?

  • #2
    New to the CF scene
    Join Date
    Aug 2008
    Posts
    7
    Thanks
    0
    Thanked 2 Times in 2 Posts
    I recreated something I think is along the lines of what you ask. It works for me, in Firefox 3. Basically I
    - isolated your .click() handler function as handler()
    - isolated the attachment of click handlers in attach()
    - moved your attachment _inside_ the handler() function, so you don't call attach before the .get() completed

    ----------------

    test.html
    Code:
    <html>
    <head>
    <script src="jquery.js"></script>
    <script>
    
    var state = 1;
    function handler(){
    	var oCommentDiv = $('#oCommentDiv');
    
    	var page = "test2.html";
    	if(state == 1){
    		state = 2;
    		page  = "test3.html";
    	}else{
    		state = 1;
    	}
    
    	$.get(page, {},function(data){
    		oCommentDiv.html(data);
    
    		// reattach event handlers to newly-generated links.
    		attach();
    	});
    
    	return false;
    }
    
    function attach(){
    	$(".comments_previous, .comments_next").click(handler);
    }
    
    
    attach();
    
    </script>
    <body>
    
    	<input type="button" onclick="handler();"/>
    	<div id="oCommentDiv">test</div>
    
    </body>
    </html>
    ----------------

    test2.html

    Code:
    <div>div2</div>
    <a href="#" class="comments_previous">previous</div>
    <a href="#" class="comments_next">next</div>
    ---------------

    test3.html

    Code:
    <div>div3</div>
    <a href="#" class="comments_previous">previous</div>
    <a href="#" class="comments_next">next</div>

  • Users who have thanked fsav for this post:

    Spudhead (10-03-2008)

  • #3
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts
    That has indeed fixed it, many thanks. It was how to pass the handler function as an argument of the click(), and what would count as $(this) if I did, that I couldn't fathom. Makes sense now.

    One minor thing though: initially, when I was copying your code into my function, I mistakenly put the event-reattaching bit after the AJAX bit (ie: just before the return false), instead of inside it as you've done. It didn't work - the event handler wasn't attached to the new elements - and I don't understand why?

  • #4
    New to the CF scene
    Join Date
    Aug 2008
    Posts
    7
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Well I did that too before realizing the .get is probably asynchronous, so the handler function passed to get() is called after the attachment code has been run. Therefore you end up attaching the events to the DIVs that will be erased when the get() handler is called.

    Um, at least, that's how I rationalize it :P


  •  

    Posting Permissions

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