The use of the Live () method in jquery is deeply parsed

Overview

jquery appends an event handler 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 is appended with an event handler, and the element that is added later will not. You need to use it again for this purpose. Bind (). For example

Click here

You can bind this element to a simple click event:

$ ('. ClickMe '). Bind (' click ', function () {
Alert ("Bound handler called.");
});

When you click on an element, a warning box pops up.

Then, imagine that another element has been added after this.

$ (' body '). Append ('
Another target
');

Although this new element can also match the selector ". ClickMe", because this element is added after calling. Bind (), clicking on this element will not have any effect.

. Live () provides a way to respond to this situation. If we were to bind the Click event like this:

$ ('. ClickMe '). Live (' click ', function () {
Alert ("Live handler called.");
});

Then add a new element:

$ (' body '). Append ('
Another target
');

Then click on the new element and he will still be able to trigger the event handler function.

Event Delegate

The. Live () method is valid for an element that has not yet been added to the DOM because of the use of event delegates: event handlers that are bound on ancestor elements can respond to events that are triggered on descendants.

The event handler that is passed to. Live () is not bound to the element, but instead 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 occur in turn:

1. Generate a click event to pass to <div> to process

2, because no event handler function is directly bound to <div>, so events bubble to the DOM tree

3, the event continues to bubble up to the root node of the DOM tree, which is bound by default to this special event handler.

4. Perform a special Click event handler that is bound by the. Live ().

5. The event handler function first detects the target of the event object to determine if it needs to continue. This test is done by detecting whether the $ (event.target). Closest ('. ClickMe ') can find a matching element.

6. If a matching element is found, the original event handler is called.

Because the test is only done in the fifth step above when the event occurs, the element that is added at any time can respond to the event.

Additional Instructions

. Live () is useful, but because of its special implementation, it cannot be simply replaced in any case. bind (). The main differences are:

In jquery 1.4, the. Live () method supports custom events, and all JavaScript events are supported. In jquery 1.4.1, 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 the elements found through the DOM traversal method. Instead, you should always use the. Live () method directly behind a selector, as mentioned in the previous example.

When an event handler is bound with a. Live (), to stop executing other event handlers, the function must return FALSE. Simply calling. Stoppropagation () does not achieve this purpose.

Refer to the. bind () method to get more information about event bindings.

In jquery 1.4.1, you can bind multiple events at once 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 the event handler function

fn function to bind event handler

Example

HTML Code:

Click me!

JQuery Code:
$ ("P"). Live ("Click", Function () {
$ (this). After ("

Another paragraph!

");
});

Description:

Prevent default event behavior and event bubbling, return False

JQuery Code:
$ ("a"). Live ("Click", Function () {returnfalse;});

Description:

Just block the default event behavior jQuery code:
$ ("a"). Live ("Click", Function (event) {
Event.preventdefault ();
});