Search within TutorialsPark

Jquery Live Event Binding


Learn to use jQuery to perform live event Binding


jQuery Events: Performs Live Event Binding

When you employ event handlers using the bind() method there is a limitation that handler function cannot be attached to new Elements of the DOM.


Table : Methods for Automatically Registering Event Handlers

Method Description
live(eventType, function)
live(eventType, data, function)
live(map)
To add an event handler to the element that match the selector of a jQuery, now or in the future.
die() To remove all of the event handlers created with the live method.
die(eventType) To remove event handlers created with the live method for the specified event types.
delegate(selector, eventType, function)
delegate(selector, eventType, data, function)
delegate(selector, map)
To add an event handler to the elements that match the selector attached or to be attached to the elements in the jQuery object.
undelegate()
undelegate(selector, eventType)
To remove event handlers created with the delegate method for specified event types.

jQuery Events : Adding Elements after assigning Event Handlers

We will use the jQuery bind() method to set up event handlers and then add new elements , but we find that new elements are not associated to the event handler function.

Example: Adding Elements after assigning Event Handlers

Give it a TRY! » Note: It returns a jQuery Object, which can be used for chaining purposes


jQuery Events : Using the live() Methods

The jQuery live() method allows you to add an event handler to the elements newly added to DOM.

The newly added element matches the selector of the jQuery Object used with the live() method and is associated with the event handlers in real time.

Example: Using the live() Method

Give it a TRY! » Note:If no class names are specified in the parameter, all classes will be removed.


jQuery Events : Using the die() Method

The jQuery method of die() is a compliment of the live() method, it allows you to remove the handlers and prevent them form being assigned to any new element that matches the selector.

You must use the same selector with both the live() and die() , or else the method won't work.

Example: jQuery Events: Using the die() Method

Give it a TRY! » Note:The method can take one or more class names as its parameter.


jQuery Events : Using the delegate() Method

The jQuery method of delegate() allows to you specifiy the position in the DOM where the event listener will be located.

If you do not use delegate() method then the events have to move all the way up to the document element, before any event handler functions are executed.

Example: Using the delegate() Method

Give it a TRY! » Note:If no value is returned , jQuery removes all classes from the element.