The jQuery live () method attaches an event handler function to all matching elements, even if the element is generated later through the append, prepend, after and other events, the content is still valid.
This method can be seen as a variant of the. bind () method. When. bind () is used, an event processing function will be appended to the element matched by the selector, and no elements will be added later. Therefore, you need to use. bind () again. For example:
<body> <div class="clickme">Click here</div> </body>
You can bind a simple click event to this element:
$('.clickme').bind('click', function() { alert("www.phpernote.com"); });
When an element is clicked, a warning box is displayed. Then, imagine that another element was added.
$('body').append('<div class="clickme">Another target</div>');
Although this new element can also match the selector ". clickme", clicking this element will not work because it is added after. bind () is called.
But live () provides a method for this situation. If we bind a click event like this:
$('.clickme').live('click', function() { alert("www.phpernote.com"); });
In this way, clicking the new element still triggers the event processing function.
Event Delegate
The live () method is effective for an element that has not been added to the DOM because event delegation is used: event Handlers bound to the ancestor element can respond to events triggered on future generations. The event handler passed to live () is not bound to an element, but is bound to the root node of the DOM tree as a special event handler.
In our example, when a new element is clicked, the following steps are taken in sequence:
Generate a click event and pass it to <div> for processing.
Since no event handler function is directly bound to <div>, the event bubbles to the DOM tree.
Events are continuously bubbling until the root node of the DOM tree. By default, this special event handler function is bound to it.
Execute the special click event processing function bound by. live.
The event handler first checks the target of the event object to determine whether to continue. This test is performed by checking whether matching elements can be found in condition (event.tar get). closest ('. clickme.
If matched elements are found, the original event handler is called.
Because the test is performed in step 5 of the preceding step only when an event occurs, the element added at any time can respond to the event.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
