Question

我正在尝试在选中复选框时触发JQuery。起初我意识到我的JQuery只适用于静态元素。我阅读了几篇帖子，发现我需要.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();基本相同，因为您仍在选择所需的元素并将事件应用于这些元素，上面示例的工作方式是它仅将事件应用于document，然后在触发事件时检查选择器。

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

这称为事件委派

<强> jQuery Learn Event Delegation

Answer 3

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

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

Answer 4

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

或者，您可以将其容器绑定在document.ready：

上

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

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

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

4 个答案: