How to catch events on future elements in jQuery


In this tutorial I will show you how to catch events on future elements in jQuery. For example if we need to add click event on ajax calls loaded elements we need to use on() method of jQuery.

Syntax for on() method:

$(document).on(event, selector, handler)

Example:

$(document).on('click', '.clickme', function(){
	alert('clicked');
});

Also we can replace $(document) with a selector for a static parent of the element. For example, if we have a static div element with id DIV_ID and clickme class elements are added dynamically from ajax call, we can use it like

$("#DIV_ID").on('click', '.clickme', function(){
	alert('clicked');
});

Do not use .live() and .bind() methods as these are deprecated in latest jQuery version. For jQuery 1.7+ only use .on() method.