From Jquery1.4.1api
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.
<body> <div class= "ClickMe" >click here</div> </body>
$ ('. ClickMe '). Bind (' click ', Function () {
alert ("Bound handler called.");
$ (' 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.");
$ (' body '). Append (' <div class= "ClickMe" >another target</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:
Generate a Click event to be passed to <div> handle because no event handler functions are directly bound to <div>, the event bubbles into the DOM tree and the event bubbles continuously to the root node of the DOM tree, which is bound by default to this particular event handler. Performs a special Click event handler that is bound by. Live (). 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. 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 the jquery 1.4.1. In jquery 1.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 ().
There is a die method and live just thinking that will unlock the live registered custom event.
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
