The use of the Live () method in jquery.

  This article is mainly on the use of jquery, Live () Methods of detailed analysis of the introduction, the need for friends can come to the reference, hope to help everyone else

Add events to jquery's dynamically generated page elements? Use the Livequery plug-in, or you can use the live method of jquery. Extracts a section of live simple use method.   Live (type, [data],fn)   Overview   jquery Appends 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   Click here   you can bind a simple click event to this element:   $ ('. ClickMe '). Bind (' click ', Function () { alert ("Bound ha Ndler called. ");      });     When you click on the 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 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.")     & nbsp; });   then add a new element:   $ (' body '). Append (' Another target ');    and then click on the new element, he can still trigger the event handler function.     Event delegates   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 bound on ancestor elements can respond to events triggered on descendants.   event handler functions 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 the new element is clicked, the following steps occur:   1, generate a click event to be passed to <div> to process   2, because there is no event handler function directly bound to <div>, So the event bubbles up to the DOM tree   3, the event bubbles up to the root node of the DOM tree, and by default this particular event handler is bound.   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 the fifth step above only when the event occurs, the elements added at any time can respond to this event.     Additional notes   Live () is useful, but because of its special implementation, it cannot be easily replaced in any case. bind (). The major differences are:   in jquery 1.4, the. Live () method supports custom events and 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 through the DOM traversal method. 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. Just tuneWith. Stoppropagation () This is not possible.   Reference. The bind () method can get more information about event bindings.   in 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         &NBS P. Want to bind event handler   FN                  function         Bound event-handling functions     example   HTML code:   Click me!   JQuery code:     $ ("P"). Live (' click ', Function () {         $ (this). After ("  Another paragraph!   ");    });    Description:   Block default event behavior and event bubbling, return false   JQuery code: $ ("a"). Live ("Click", Function () {return False });   Description:   Just block default event behavior   JQuery code: $ ("a"). Live ("Click", Function (event) {    Event.preventdefault () ;  });