JQuery. Live of method usage in depth analysis

  • 2020-03-30 01:08:37
  • OfStack

Add events to jquery dynamically generated page elements? Use the livequery plug-in, or you can use jquery's live method. Extract a simple way to use live.

Also see the website for more details (link: http://api.jquery.com/live/)

Live (type, [data], fn)

An overview of the

JQuery appends an event handler to all matched elements, even if the element is added later.

This method is a variation of the basic.bind() method. With.bind(), an event handler is attached to the element that the selector matches, but not to the element that is added later. You need to use.bind() again to do this. For instance

Click here
You can bind a simple click event to this element:

$(' clickme '). The bind (' click ', function () {
  Alert (" Bound handler called. ");          

When an element is clicked, a warning box pops up.

Then, imagine that there's another element added after that.

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

Although this new element also matches the selector ".clickme", clicking on it will have no effect because it was added after the.bind() call.

.live() provides a method for this. If we 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 it will still trigger the event handler.  

Event delegation

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

The event handler passed to.live() is not bound to the element, but is bound to the root node of the DOM tree as a special event handler. In our example, the following steps occur when a new element is clicked:

1. Generate a click event to be passed to < Div> To deal with

2. No event handler function is directly bound in < Div> So the event bubbles into the DOM tree

3. Events bubble all the way to the root node of the DOM tree, which is bound with this special event handler by default.

4. Execute the special click event handler bound by.live().

5. The event handler first checks the target of the event object to see if it needs to continue. This test is through the detection $(event. The target). Closest (' clickme ') could find of the matched elements.

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

Since the test is done in step 5 above only when an event occurs, the element added at any time can respond to the event.

Additional instructions

.live(), while useful, cannot simply replace.bind() in any case because of its special implementation. The main differences are:

When an event handler is bound with.live(), it must return false to stop executing other event handlers. Calling.stoppropagation () alone does not accomplish this.

Refer to the.bind() method for more information about event binding.

In jQuery 1.4.1, you can bind multiple events to.live() at once, similar to what.bind() provides.

In jQuery 1.4, the data parameter can be used to pass additional information to the event handler. A good use is to deal with problems caused by closures. You can refer to the.bind() discussion for more information.


TypeString        The event type

Data (optional)       Object                  Event handler to bind to

Fn                                  Function              Event handler to bind to

The sample

HTML code:
Click me!

JQuery code:
      $(" p "). The live (" click ", function () {
                $(this) after ("

Another com.lowagie.text.paragraph!



Prevents default event behavior and event bubbling, returning false

JQuery code:
$(" a ".) live (" click ", function () {returnfalse; });


Simply block the default event behavior

JQuery code:
$(" a ".) live (" click ", function (event) {
      Event. The preventDefault ();

Related articles: