Detailed explanation of jQuery adding event response to dynamically generated content jQuery live() method

The jQuery live() method attaches an event processing function to all matching elements. Even if the element is later generated through append, prepend, after and other events, it will still be valid.
This method can be seen as a variant of the .bind() method. When using .bind(), elements matched by the selector will have an event handler attached to them, while elements added later will not. You need to use .bind() again for this. For example:

<body> 
<div class="clickme">Click here</div> 
</body>

Copy after login

You can bind a simple click event to this element:

Copy the code The code is as follows:

$(' .clickme').bind('click', function() { alert(www.jb51.net); });

When an element is clicked, a warning box will pop up. Then, imagine that another element is added after this.

Copy code The code is as follows:

$('body').append('Another target
'); 

Although this new element will also match the selector ".clickme" , since this element is added after calling .bind() , clicking on this element will have no effect.
But live() provides a method for this situation. If we bind the click event like this:

Copy the code The code is as follows:

$('.clickme'). live('click', function() { alert("www.jb51.net"); });

In this way, clicking on the newly added element can still trigger the event handler.
Event delegation
The live() method works on an element that has not yet been added to the DOM due to the use of event delegation: event handlers bound to ancestor elements can respond to events triggered on descendants. The event handler passed to live() will not be bound to the element, but will be treated as a special event handler and bound to the root node of the DOM tree.
In our example, when a new element is clicked, the following steps occur:
1. Generate a click event and pass it to

for processing.
2. Since there is no event handling function directly bound to

, the event bubbles up to the DOM tree.
3. Events continue to bubble up to the root node of the DOM tree. This special event processing function is bound to it by default.
4. Execute the special click event handling function bound by .live().
5. This event processing function first detects the target of the event object to determine whether it needs to continue.
6. This test is implemented by testing whether $(event.target).closest('.clickme') can find matching elements.
7. If a matching element is found, the original event handler is called.
8. Since the test in step 5 above will only be done when the event occurs, elements added at any time can respond to this event.
The above is a detailed introduction to jQuery's jQuery live() method of adding event responses to dynamically generated content. I hope it will be helpful to everyone's learning.

Related labels：

jquery

source：php.cn

Previous article：Jquery timeline effects (three different types)_jquery Next article："JavaScript Advanced Programming" study notes object and array reference types_javascript skills

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Detailed explanation of jQuery adding event response to dynamically generated content jQuery live() method_jquery