Details about how jQuery adds Event Response to dynamically generated content jQuerylive () _ jquery-js tutorial

This article mainly introduces jQuery's method of adding Event Response jQuerylive () to dynamically generated content. For more information, see jQuery live () the method is to attach an event handler function to all matching elements, even if the elements are generated using 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:

 
Click here
  

You can bind a simple click event to this element:

The Code is as follows:

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

When an element is clicked, a warning box is displayed. Then, imagine that another element was added.

The Code is as follows:

$ ('Body'). append ('

Another target

');

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:

The Code is as follows:

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

By clicking the new element, it can still trigger 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:
1. Generate a click event and pass it

.
2. Because no event handler function is directly bound

So the event bubbles to the DOM tree.
3. Events are continuously bubbling until the root node of the DOM tree. This special event handler function is bound by default.
4. Execute the special click event processing function bound by. live.
5. The event handler first checks the target of the event object to determine if it is necessary to continue.
6. This test is performed by checking whether matching elements can be found in response (event.tar get). closest ('. clickme.
7. If a matching element is found, the original event processing function is called.
8. 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.
The above is a detailed introduction to the jQuery live () method for adding event responses to dynamically generated content by jQuery. I hope it will be helpful for your learning.