How to use the Live () method in query
Today in writing code to encounter a problem, directly on the code to see:
$ (function () {
$ (". File"). Live ("Click", Function () {
var task_name=$ (this). text ();
$ ("#selecting tbody"). Append ("<trclass=gradea" ><tdclass= ' center ' > "+task_name+" </td></tr > ");
});
});
The object of the $ (". File") is passed from the background, click Definitely not, bind () also cannot get dynamically added elements, so only live (), but the problem with live () is that the table rows inexplicably added two lines, that is, the binding event is repeated. Tangled up a morning finally found the reason, First watch live () method introduction.
Live (type, [DATA],FN)
Overview
jquery attaches an event handler function to all matching elements, even if the element is added later.
This method is basically yes. A variant of the bind () method. When you use. bind (), the element that the selector matches attaches an event handler function, and the elements that are added later are not. This needs to be reused once. bind () is OK. 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 you click on the element, a warning box pops up.
Then, imagine that another element has been added after this.
$ (' body '). Append (' <div class= "ClickMe" >another target</div> ");
Although this new element can also match the selector ". ClickMe", because this element is added after calling. Bind (), clicking on this element will have no effect.
. Live () provides a way to respond to this situation. If this is how we bind the Click event:
$ ('. ClickMe '). Live (' click ', function () {
Alert ("Live handler called.");
});
And then add a new element:
$ (' body '). Append (' <divclass= "ClickMe" >Anothertarget</div> ");
Then click on the new element, and he can still trigger the event handler function.
Event delegates
The live () method works with an element that has not yet been added to the DOM because of an event delegate: an event handler bound on an ancestor element can respond to events that are triggered on a descendant.
The event handler function passed to. Live () is not bound to the element, but rather as a special event handler, bound to the root node of the DOM tree. In our example, when you click on a new element, the following steps occur in sequence:
1, generate a click event pass to <div> to deal with
2, because there is no event handler function directly bound to the <div>, so the event bubbling to the DOM tree
3. The event bubbles continuously to the root node of the DOM tree, which is bound by default to this particular event handler function.
4. Perform a special Click event handler that is bound by. Live ().
5, this event handler first detects the target of the event object to determine if it needs to continue. This test is achieved by detecting whether the $ (event.target). Closest ('. ClickMe ') can find a matching element.
6. If a matching element is found, the original event handler function is invoked.
Because the test is done in step fifth above only when the event occurs, the element added at any time can respond to the event.
Additional Instructions
While live () is useful, it cannot be easily replaced under any circumstances because of its special implementation. BIND (). The main differences are:
In jquery 1.4, the. Live () method supports custom events, as well as all JavaScript events. In the jquery 1.4.1, the focus and blue events are even supported (mapped to more appropriate and bubbling focusin and focusout).
In addition, hover (mapped to "MouseEnter MouseLeave") can also be supported in jQuery1.4.1. In jquery1.3.x, however, only supported 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 by means of the DOM traversal. Instead, it should always be used directly behind a selector. The live () method, as mentioned in the previous example.
When an event handler is bound with. Live (), the function must return FALSE if you want to stop performing other event-handling functions. Only the call to. Stoppropagation () does not accomplish this.
Refer to the. bind () method for more information about event bindings.
In the jquery 1.4.1, you can bind multiple events to. Live (), similar to the functionality provided by. BIND ().
In jquery 1.4, the data parameter can be used to pass additional information to the event handler function. A good use is to deal with problems caused by closures. You can refer to the discussion of. Bind () for more information.
Parameters
Typestring Event Type
Data (optional) Object to bind to the event handler function
The event handler that the FN function wants to bind
Example
HTML Code:
<p>Clickme!</p>
JQuery Code:
$ ("P"). Live ("Click", Function () {
$ (this). After ("<p>Anotherparagraph!</p>");
});
Describe:
Prevent default event behavior and event bubbling, return False
JQuery Code:
$ ("a"). Live ("Click", Function () {return false;});
Root cause here, you need to block default event behavior and event bubbling, add return false after code; OK, okay.
Describe:
Only block default event behavior
JQuery Code:
$ ("a"). Live ("Click", Function (event) {
Event.preventdefault ();
});
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
