How To: jQuery Event Delegation

Until now, I’ve used jQuery for some of its more basic attributes and features like tabs and animation with a lot of customization (which I am going to cover later). Recently I had to do some work involving adding, editing, and deleting files with some ajax to update the page on the fly. After running into the issue of jQuery animations not working after the update, I had to find a solution; that was Event Delegation.

As much as I love jQuery and all its great uses I still have a lot to learn from it, and event delegation was one of those useful features. I have become fairly well versed in the animation field with interactions but until now had not dealt with an ajax update of a page that had items hidden by default  after it has loaded. The use for us was within the application section of the listings settings where the administrator is able to add, edit, or delete an application and the page would update the field showing them.

Let’s get into some of the code and see what is actually happening. This is the html that is being manipulated…

<div id="current-applications">
	<p>
		<a href="#" class="pdf-icon">My App</a>
		<a href="#" class="edit-link">Edit</a> |
		<a onclick='ajax_delete_app();' class="delete-link">Delete</a>
	</p>
	<form name="myform" method="post" enctype="multipart/form-data">
	<table class="edit-listings-box" cellpadding="0" cellspacing="0" border="0" width="100%">
		<tr>
			<td>
			<!-- Information about application -->
                        <input type="submit" class="update-link" value=\"Update\" />
			</td>
		</tr>
	</table>
	</form>
</div>

By default, the code above will hide the form and show the information only after the user clicks the application name “My App” or “Edit”. The “Delete” link will call some ajax functionality to delete the record and file attached to it; after which, it will redisplay all the information inside of the <div id=”applications”></div>. Now the event delegation comes in handy. Because the page information is reloading we need to use event delegation to always make the jQuery calls viable on the newly created output. The structure of the above html is used in the jQuery code to handle the animations even after a page update. The classes and ids need to be the same for the links and surrounding elements every time it is outputted so the event delegation can access the the correct segments.

//jQuery Event Delegation
$('#applications').click(function (e) {
	if($(e.target).attr('class') == 'edit-link') {
		$(e.target).parent().next().contents().filter(".edit-listings-box").toggle("blind");
	}else if($(e.target).attr('class') == 'pdf-icon') {
		$(e.target).parent().next().contents().filter(".edit-listings-box").toggle("blind");
	}else if($(e.target).attr('class') == 'done-link') {
		$(e.target).parent().parent().parent().parent().toggle("blind");
	}else if($(e.target).attr('class') == 'update-link') {
		$(e.target).parent().parent().parent().parent().parent().submit();
        }else if($(e.target).attr('class') == 'delete-icon') {
		if($(e.target).parent().next().contents().filter(".edit-listings-box").is(':visible')) {
			$(e.target).parent().next().contents().filter(".edit-listings-box").hide("blind");
		}
	}

	return false;
});

As you can observe, the jQuery code above will only deal with <a> tags inside the element with the id=”applications”. It will then check the class of the link and take the appropriate action. If you aren’t familiar with jQuery, the code referencing the element to hide may look odd but it is just  used to traverse the html. Anyway this is just a very basic idea of event delegation and how it was used within our web application. If you have any specific questions regarding the subject you are more than welcome to email me and ask. Take it easy!

Tagged as: bluetux, event delegation, how-to, javascript, jQuery, jquery event delegation, rentwiz