Home > Developer > JavaScript
How to use the. live () method in Query
When I was writing code today, I encountered a problem. Let's look at the Code directly:
$ (Function (){
$ (". File"). live ("click", function (){
Var task_name = $ (this). text ();
$ ("# Selecting tbody "). append ("<trclass = gradeA '> <tdclass = 'center'>" + task_name + "</td> </tr> ");
});
});
$ (". File ") the object is transmitted from the background, and click is definitely not acceptable. bind () cannot obtain dynamically added elements. Therefore, live () can only be used, but live () is used () the problem is that the table row is inexplicably added to the two rows, that is, the binding event is executed repeatedly, and the reason is finally found in the morning. Let's first look at the introduction of the live () method.
Live (type, [data], fn)
Overview
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"> Clickhere </div>
<Body>
You can bind a simple click event to this element:
$ ('. Clickme'). bind ('click', function (){
Alert ("Bound handler called .");
});
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.
. Live () provides a method for this situation. If we bind a click event like this:
$ ('. Clickme'). live ('click', function (){
Alert ("Live handler called .");
});
Then add a new element:
$ ('Body'). append ('<divclass = "clickme"> Anothertarget </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. Because no event handler function is directly bound to <div>, 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. This test is implemented by checking whether the matching element can be found by checking the condition (event.tar get). closest ('. clickme.
6. If a matching element is found, the original event processing function 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 (ing to "mouseenter mouseleave") is also supported in jQuery1.4.1 "). However, jQuery1.3.x only supports JavaScript and custom events: 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
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
