The use and differences of bind and live in jQuery

  • 2020-03-30 01:34:51
  • OfStack

Before we started with these two methods, we used the click() method


$("a").click(function() {
     alert("hello");
});

The click() method is a simple method for the bind() method. In the bind (),
JQuery all JavaScript event objects like focus, mouseover, and resize,
Can be passed in as a type parameter.

Parameter: the type, [data], function (eventObject)
Such as:


$("p").bind("click",function(){
     alert("hello");
})

You can also pass arguments

var message = "how are you!";
$("p").bind("click",{msg:message},function(e){
     alert(e.data.msg);
})

Live () appends an event handler to all matched elements,
Even if the element is added later. As follows:

<tr class="mytr">
     <td class="mytd">Click me</td>
</tr>
$(".mytd").bind("click",function(){
      alert("hello");
})

Clicking on Clike me will bring up hello

At this point, a new element is added


$(".mytr").after("<tr><td class='mytd'> After adding the </td></tr>");

In this case, using bind and clicking "after" will not be executed
Use the live() method instead

$(".mytd").live("click",function(){
 alert("hello");
})

The.live() method works for an element that has not been added to the DOM because of the use of event delegates:
An event handler bound to an ancestor element can respond to an event that fires on a descendant.
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.


Related articles: