Jquery live of repeated binding solution

Use of the.live() method in Query

Today, I met a problem when I was writing the code.
$(function () {
                    $(" file ") live (" click ", function () {
                                      Var task_name = $(this). The text ();
                                      $(" # selecting tbody "), append (" < Trclass = gradeA '> < = 'center' tdclass >" + task_name + "< / td> < / tr>" );          
                    });    
      });

$(" file ") came from the background of the object, click can't be sure, the bind () cannot access to dynamically add elements, therefore can only use the live (), but using the live guild puzzling problems () is a form of added two lines, repeat the binding events, namely entangled with the morning finally found out the reasons, look at the live () method is introduced.

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

< Body>
< Div class = "clickme >" Clickhere< / div>
< Body>

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 (' < Div class = "clickme >" Another target< / div> ');

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 (' < Divclass = "clickme" > Anothertarget< / div> ');

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.

parameter

TypeString        The event type

Data (optional)       Object                  Event handler to bind to

Fn                                  Function              Event handler to bind to

The sample

HTML code:

< P> Clickme! < / p>

JQuery code:
$(" p "). The live (" click ", function () {
$(this) after (" < P> Anotherparagraph! < / p>" );
});

Description:

Prevents default event behavior and event bubbling, returning false

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

// the root cause is to prevent the default event behavior and event bubbling, and to add return false after the code; With respect to OK

Description:

Simply block the default event behavior

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