javascript JQuery .on("click", function() ) 不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19192376/
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", function() ) doesn't work
提问by CYC0616
I am trying to fire JQuery when I checkbox is checked. At first I realized my JQuery only works for static elements. I read through a couple posts and found out that I need .on("click, function()) in order to fire that same piece of javascript for dynamically added elements.
当我选中复选框时，我试图触发 JQuery。起初我意识到我的 JQuery 只适用于静态元素。我通读了几篇文章，发现我需要 .on("click, function()) 才能为动态添加的元素触发同一块 javascript。
However, this method still doesn't work for me. Can anyone help? Thank you.
但是，这种方法对我仍然不起作用。任何人都可以帮忙吗？谢谢你。
$(document).ready(function(){
$("input[name='todo']").on('click', function(){
var isChecked = this.checked
if (isChecked == true){
$(this).next().remove();
$(this).remove();
}
if (isChecked == false)
{
alert("checkbox is NOT checked");
}
});
});
My example app: http://jsfiddle.net/JSFoo/7sK7T/8/
我的示例应用程序：http: //jsfiddle.net/JSFoo/7sK7T/8/
回答by zerkms
You need delegation:
您需要委托：
$('#ToDoList').on('click', "input[name='todo']", function() { ... });
Documentation: http://api.jquery.com/on/#direct-and-delegated-events
文档：http: //api.jquery.com/on/#direct-and-delegated-events
PS: the important note - you need to specify the element you're binding your handler to as close to the target elements as possible. In your case it's #ToDoList, not bodyor documentas other answers advice.
PS：重要说明 - 您需要指定将处理程序绑定到的元素尽可能靠近目标元素。在您的情况下，它是#ToDoList，不是body或document作为其他答案的建议。
回答by iConnor
For dynamic elements you would want to do something like this
对于动态元素，你会想要做这样的事情
$(document).ready(function () {
$(document).on('click', "input[name='todo']", function () {
var isChecked = this.checked
if (isChecked == true) {
$(this).next().remove();
$(this).remove();
}
if (isChecked == false) {
alert("checkbox is NOT checked");
}
});
});
if you use it like you were before on('click')is basically the same as click();because you are still selecting the elements required and applying the event to those elements, the way the above example works is it is only applies the event to the documentthen checking the selector when the event is fired.
如果你像以前一样使用它on('click')基本上是一样的，click();因为你仍然在选择所需的元素并将事件应用于这些元素，上面例子的工作方式是它只将事件应用于document然后检查选择器时事件被触发。
You can also change documentto a close container of the elements to be clicked if you wish.
document如果您愿意，您还可以更改为要单击的元素的关闭容器。
This is called Event Delegation
这称为事件委托
回答by Bhanuprakash D
The below is what you needed. It is slightly different syntax
下面是你需要的。语法略有不同
$(document).on('click', "input[name='todo']", function(){
回答by benams
You bind the elements on document ready, it's before they're created. You have to bind AFTER their creation.
您在文档准备好之前绑定元素，这是在它们被创建之前。您必须在它们创建后进行绑定。
Alternatively you can bind their container on document.ready:
或者，您可以在 document.ready 上绑定他们的容器：
$("#containerDiv").on('click', "input[name='todo']", function(){
// .... your code
});
- "containerDiv" should be the parent element of those checkboxes, it should be in the page on document ready!
- “containerDiv”应该是这些复选框的父元素，它应该在文档准备好的页面中！
