Detailed explanation of the solution to the problem of replacing the live method with the on method in jquery

The elements I will add in the future are ajax spliced ​​
My on is written like this

$("td").on("click","a",function(){
alert("Aha!");
});

This is the tag of the page

<td><a class="topic_a" href="#creat"  name=&#39;${data.context }&#39;>选择</a></td>

ajax splicing tag Exactly the same as the label above.

But clicking on my spliced ​​tag has no effect.
Why?

Please make sure that when you use on to bind, td already exists in the dom..
Also..why live can be because live is bound to the docuement..at any time document all exists..
The on you use, your event is bound to td..If td does not exist, it will definitely not be bound

Please learn more about the event proxy mechanism.

Replace it with delegate

Will the elements added in the future include b6c5a531a458a2e790c1fd6421739d1c?
If b6c5a531a458a2e790c1fd6421739d1c is included, the event proxy cannot be bound to $("td").
The event proxy should be bound to a higher-level element
For example, f5d188ed2c074f8b944552db028f98a1 or the parent element of f5d188ed2c074f8b944552db028f98a1
If it doesn’t work, you can also bind it to the body or document
Such as

$("body").on("click","a",function(){
alert("Aha!");
});

Use on bind.
Splice it first, then add it to the page, and then bind the event.
In js, it is also read line by line.

The binding event is written in front, and the td added later will of course not have this event.
Also ensure that td has been written to the page.

The live method is only available in the old version of jquery. The on method can only use existing tags on the page;
If you want to get future elements, you can only use the delegate method. The specific writing method is as follows:

//div是页面已经有的元素，button是js生成的未来元素！
$("div").delegate("button","click",function(){
  $("p").slideToggle();
});

 $(document).on('click', 'td a', function() {
    alert("Aha!");
  });

 $("body").delegate("td","click",function(){
    alert("ok!");
  });

Please make sure that when you use on to bind, td already exists in the dom..
Also..Why live can be because live is bound to docuement.. The document exists at any time..
The event you use on is bound to the td..If the td does not exist, it will definitely not be bound.

Please give me more information Understand the event proxy mechanism.

Write it like this

$("body").on("click","td a.topic_a",function(){
alert("Aha!");
});

Will the elements added in the future include b6c5a531a458a2e790c1fd6421739d1c?
If b6c5a531a458a2e790c1fd6421739d1c is included, the event proxy cannot be bound to $("td").
The event proxy should be bound to a higher-level element
For example, f5d188ed2c074f8b944552db028f98a1 or the parent element of f5d188ed2c074f8b944552db028f98a1
If it doesn’t work, you can also bind it to the body or document
Such as

$("body").on("click","a",function(){
alert("Aha!");
});

The above is the detailed content of Detailed explanation of the solution to the problem of replacing the live method with the on method in jquery. For more information, please follow other related articles on the PHP Chinese website!