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
live(eventType, data, function)
|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)
|To add an event handler to the elements that match the selector attached or to be attached to the elements in the jQuery object.|
|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 HandlersGive 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() MethodGive 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() MethodGive 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.