Home > Developer > Web Develop
The JQuery Live () method appends an event handler function to all matching elements, even if the element is later generated by events such as Append,prepend,after.
This method can be seen as a variant of the. bind () method. When you use. bind (), the element that the selector matches is appended with an event handler, and the element that is added later will not. You need to use it again for this purpose. Bind (). For example:
1 |
<body> <divclass="clickme">Click here</div> </body> |
You can bind this element to a simple click event:
1 |
$(‘.clickme‘).bind(‘click‘, function() { alert("www.phpernote.com"); }); |
When you click on an element, a warning box pops up. Then, imagine that another element has been added after this.
1 |
$(‘body‘).append(‘<div class="clickme">Another target</div>‘); |
Although this new element can also match the selector ". ClickMe", because this element is added after calling. Bind (), clicking on this element will not have any effect.
But Live () provides a way to respond to this situation. If we were to bind the Click event like this:
1 |
$(‘.clickme‘).live(‘click‘, function() { alert("www.phpernote.com"); }); |
By clicking on the new element, he will still be able to trigger the event handler function.
Event delegate
The live () method works on an element that has not yet been added to the DOM because it uses an event delegate: an event handler that is bound to an ancestor element can respond to an event that is triggered on a descendant. The event handler passed to Live () is not bound to the element, but instead 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 occur in turn:
Generates a click event to be passed to <div> for processing.
Since no event handler is directly bound to <div>, events bubble up to the DOM tree.
Events continue to bubble up to the root node of the DOM tree, and this special event handler is bound by default.
Executes a special Click event handler that is bound by the. Live ().
This event handler function first detects the target of the event object to determine if it needs to continue. This test is done by detecting whether the $ (event.target). Closest ('. ClickMe ') can find a matching element.
If a matching element is found, the original event handler is called.
Because the test is only done in the fifth step above when the event occurs, the element that is added at any time can respond to the event.
Additional Instructions
. Live () is useful, but because of its special implementation, it cannot be simply replaced in any case. bind (). The main differences are:
jquery adds an incident response to dynamically generated content
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
