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

JQuery .on("click", function() ) doesn't work

本文关键字：function 不起作用 click on JQuery      更新时间：2023-09-26

选中复选框时，我正在尝试触发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/

你需要委派：

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

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

$(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 委派

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

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

您将元素绑定到文档就绪上，这是在创建它们之前。您必须在创建它们后绑定。

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

$("#containerDiv").on('click', "input[name='todo']", function(){
   // .... your code
});
  • "containerDiv"应该是这些复选框的父元素，它应该在文档就绪的页面中！
相关文章：