JQuery .on（“click”，function（））不起作用

当我选中复选框时，我试图解雇JQuery。 起初我意识到我的JQuery只适用于静态元素。 我阅读了几篇post，发现我需要.on（“click，function（））才能为动态添加的元素触发相同的javascript。

但是，这种方法对我来说仍然不起作用。 有人可以帮忙吗？ 谢谢。

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

我的示例应用程序： http ： //jsfiddle.net/JSFoo/7sK7T/8/

Answer 1

你需要代表团：

 $('#ToDoList').on('click', "input[name='todo']", function() { ... }); 

http://jsfiddle.net/7sK7T/9/

文档： http ： //api.jquery.com/on/#direct-and-delegated-events

PS：重要的注意事项 – 您需要将处理程序绑定的元素指定为尽可能接近目标元素。 在你的情况下，它是#ToDoList ，而不是其他答案建议的body或document 。

Answer 2

对于动态元素，您可能希望执行此类操作

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

如果你像以前一样使用它on('click')基本上与click();相同click(); 因为您仍在选择所需的元素并将事件应用于这些元素，所以上述示例的工作方式是仅将事件应用于document然后在触发事件时检查选择器。

如果您愿意，还可以将document更改为要单击的元素的关闭容器。

这称为事件委派

jQuery学习事件委派

Answer 3

以下是您所需要的。 它的语法略有不同

 $(document).on('click', "input[name='todo']", function(){ 

Answer 4

您可以在文档准备就绪之前绑定它们，这是在它们创建之前。 你必须在他们的创作后绑定。

或者，您可以在document.ready上绑定它们的容器：

 $("#containerDiv").on('click', "input[name='todo']", function(){ // .... your code }); 

• “containerDiv”应该是那些复选框的父元素，它应该在文档准备好的页面中！