Detailed explanation of the solution to the problem of replacing the live method with the on method in jquery-JS Tutorial-php.cn

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

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

Copy after login

This is the tag of the page

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

Copy after login

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 ?
If is included, the event proxy cannot be bound to $("td").
The event proxy should be bound to a higher-level element
For example,

or the parent element of

If it doesn’t work, you can also bind it to the body or document
Such as

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

Copy after login

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();
});

Copy after login

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

Copy after login

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

Copy after login

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!");
});

Copy after login

Will the elements added in the future include

?
If

is included, the event proxy cannot be bound to $("td").
The event proxy should be bound to a higher-level element
For example, or the parent element of

If it doesn’t work, you can also bind it to the body or document
Such as

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

Copy after login

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!

Related labels：

jquery live Appear method

source：php.cn

Previous article：Detailed introduction to alternative methods after live has been deleted in jQuery 1.9 and above versions Next article：jQuery: Detailed explanation of the use of die()

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn