jquery .on('click', func) 函数没有完成它的工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8315990/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery .on('click', func) function not doing its job
提问by Ian Davis
How to create the issue:
如何创建问题：
- click on existing trigger links - something happens (pass)
- click on the "add trigger" button, which appends a new trigger link w/ same class
- click on the newly created link, and it does not do the same thing as the 1st 2 links that existed from the start (fail)
- 单击现有的触发链接 - 发生某些事情（通过）
- 单击“添加触发器”按钮，该按钮会附加一个具有相同类的新触发器链接
- 单击新创建的链接，它与从一开始就存在的 1st 2 个链接不同（失败）
Here is my example -: http://jsbin.com/equjig/3/edit
这是我的例子 -：http: //jsbin.com/equjig/3/edit
I thought the .on('click', func)function was good for adding events to current elements in the dom, but also for future elements that get added to the dom?
我认为该.on('click', func)函数适合将事件添加到 dom 中的当前元素，但也适用于添加到 dom 中的未来元素？
Here is my current javascript :
这是我当前的 javascript ：
$(document).ready(function() {
$(".link").on('click', function(e) {
e.preventDefault();
$("#out").append("clicked<br/>");
});
$("#b1").on('click', function() {
$("#p1").append("<a href='#' class='link'>new trigger</a>");
});
here is the HTML
这是 HTML
<button type="button" id="b1">add trigger</button>
<p id="p1">
<a href="#" class="link">trigger 1</a>
<a href="#" class="link">trigger 2</a>
</p>
<div id="out"></div>
Note - im using jQuery 1.7
注意 - 我使用 jQuery 1.7
Thanks!
谢谢！
回答by Manse
You are almost there with on ...
你快到了...
working example : http://jsbin.com/equjig/6/edit
工作示例：http: //jsbin.com/equjig/6/edit
$(document).ready(function() {
$('#p1').on('click','.link', function(e) {
e.preventDefault();
$("#out").append("clicked<br/>");
});
});
This will work - you should select a parent div of the .linkelements (i have used $('#p1')here, like in your jsbin)
这会起作用 - 您应该选择.link元素的父 div （我在$('#p1')这里使用过，就像在您的 jsbin 中一样）
回答by Jasper
.on()can also behave like .delegate()which is used like this:
.on()也可以像下面.delegate()这样使用：
//#p1 is the context and .link is what will be bound to as long as the .link element is a descendant of #p1
$('#p1').on('click', '.link', function(e) {
e.preventDefault();
$("#out").append("clicked<br/>");
});
Here's documentation for .on(): http://api.jquery.com/on
这里的文档.on()：http: //api.jquery.com/on
回答by Sean Vieira
According to the api docs for onthe signature .on('click', func)replicates .bind's behaviors - that is to say, it binds the listener to each and every existingelement in the collection.
根据on签名的 api 文档.on('click', func)复制.bind的行为 - 也就是说，它将侦听器绑定到集合中的每个现有元素。
To get .delegatebehaviors - that is, to bind to each and every event that originates from a specific kind of (child) element, include a selector:
要获取.delegate行为 - 即绑定到源自特定类型（子）元素的每个事件，请包括一个选择器：
$("parent-selector").on('click', 'your-selector', func)
回答by David Hellsing
You can use .on()from version 1.7, and it also somewhat replaces the old .live()except in how you provide the syntax.
您可以.on()从 1.7 版开始使用，.live()除了提供语法的方式外，它还在一定程度上取代了旧版本。
Using .on()you can delegate the event to any parent element like this:
使用.on()您可以将事件委托给任何父元素，如下所示：
$(document.body).on('click','.link',function() {
// handler for all present and future .link elements inside the body
});
This way, it will also work for future elements that are added inside the body that has the className 'link'.
这样，它也适用于将来添加到具有 className ' link'的正文中的元素。
I made a small modification to your lint that works the way you expect: http://jsbin.com/adepam. And here is the code:
我对你的 lint 做了一个小修改，按照你期望的方式工作：http: //jsbin.com/adepam。这是代码：
$(document).ready(function() {
$(document.body).on('click', '.link', function(e) {
e.preventDefault();
$("#out").append("clicked<br/>");
});
$("#b1").on('click', function() {
$("#p1").append("<a href='#' class='link'>new trigger</a>");
});
});
回答by EmCo
The onclickevent applied only to the elements that already exist. You need to use .livefunction.
该onclick事件仅应用于已存在的元素。您需要使用 .live功能。
回答by Pastor Bones
Change the .on() to .live()
将 .on() 更改为 .live()
$(document).ready(function() {
$(".link").live('click', function(e) {
e.preventDefault();
$("#out").append("clicked<br/>");
});
$("#b1").on('click', function() {
$("#p1").append("<a href='#' class='link'>new trigger</a>");
});
});
