6

当我选中复选框时，我试图触发 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/

4

4 回答 4

11

您需要委托：

$('#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作为其他答案的建议。

于 2013-10-04T23:46:44.383 回答
3

对于动态元素，你会想要做这样的事情

$(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 事件委托

于 2013-10-04T23:46:28.337 回答
3

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

$(document).on('click', "input[name='todo']", function(){
于 2013-10-04T23:54:39.637 回答
1

您在文档上绑定元素准备好，在它们被创建之前。您必须在创建后绑定。

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

$("#containerDiv").on('click', "input[name='todo']", function(){
   // .... your code
});
  • “containerDiv”应该是那些复选框的父元素，它应该在页面上的文档中准备好！
于 2013-10-04T23:50:53.370 回答