Jquery - reattach event handlers after AJAX update?

Spudhead · 10-03-2008, 12:39 PM

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?

fsav · 10-03-2008, 03:59 PM

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>

Spudhead · 10-03-2008, 04:36 PM

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?

fsav · 10-03-2008, 04:40 PM

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