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

选择

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 timedocumentall exists..
The on you use, youreventis 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?
Ifis included, the event proxy cannot be bound to $("td").
The event proxy should be bound to a higher-level element
For example,

$("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 ofjquery. 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

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