Home > Others

Use the live () method to bind events to new nodes

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

JQuery attaches an event handler function to all matching elements, even if this element is added later.

This method is basically 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("Bound handler called.");});
Clickme layer: Click my

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 have any effect because it is added after. bind () is called .. Live () provides a method for this situation. If we bind a click event like this:

$('.clickme').live('click', function() {alert("Live handler called."); });

Add a new div

Then, click the new element to 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. Instead, it serves as a special event handler and binds it to the root node of the DOM tree. In our example, when a new element is clicked, the following steps are taken in sequence:

  1. Generate a click event and pass it to div for processing
  2. Since no event handler function is directly bound to the div, the event bubbles to the DOM tree.
  3. Events are continuously bubbling until the root node of the DOM tree. By default, this special event handler function is bound to it.
  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 whether to continue. This test is performed by checking whether matching elements can be found in condition (event.tar get). closest ('. clickme.
  6. 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.

Additional instructions

. Live () is useful, but it cannot simply replace. bind () in any situation due to its special implementation method (). The main differences are:

  • In jQuery 1.4, the. live () method supports custom events and all JavaScript events. In jQuery 1.4.1, the focus and blue events are even supported (ing to focusin and focusout that are more appropriate and can be bubbling ). In addition, hover (mapped to "mouseenter mouseleave") is also supported in jQuery 1.4.1 "). However, in jQuery 1.3.x, only JavaScript events and custom events are supported: click, dblclick, keydown, keypress, keyup, mousedown, mousemove, mouseout, mouseover, and mouseup.
  • . Live () does not fully support elements found through DOM traversal. Instead, the. live () method should always be used directly after a selector, as mentioned in the previous example.
  • When an event processing function is bound with. live (), to stop executing other event processing functions, this function must return false. Only. stopPropagation () can be called.

Refer to the. bind () method to obtain

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
how to use tostring method how to use post method in php how to use post method in html must use set method to update entry how to use get method in html how to use new relic how to use new iphone

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.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More