JQuery adds Event Response to dynamically generated content (jquery live Method Introduction)

Source: Internet
Author: User

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.

Articles you may be interested in
  • Add events to content dynamically generated by jquery
  • It is dangerous for multiple URLs on the website to access the same content.
  • JavaScript and Jquery dynamically load Js files and Css files
  • How does jquery bind events to dynamically created nodes?
  • Js address bar special effects (display the size of all images with links on the page and view the height of the current browser)
  • Js obtains the height of the scroll bar from the top and bottom of the browser. It is compatible with ie and firefox.
  • Jquery obtains the set of peer elements, and summarizes the usage of jquery siblings
  • Shoulder, back muscle group exercise-Bring Up-bend up rowing-Move up-Stand Up-Stand up weight bend up-Sit posture neck pull down-bend upright hold up-neck front wide hold up

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.