Javascript 为什么换行操作只适用于jQuery待办事项列表中的每一项？

我正在创建一个jQuery待办事项列表，希望能够在其中添加一项，然后单击复选框添加一行。最后，当我点击垃圾箱按钮时，附加的项目应该被删除。 只要我只添加一项，添加一行，然后删除该项，代码就可以正常工作。 如果添加了更多项目，我仍然可以添加和删除项目，但行通过并不适用于每个项目。似乎我只能选择偶数或奇数编号的项目进行换行。 我的代码如下，下面是一个示例。 作为编码领域的新手，非常感谢您的帮助

HTML

---

您应该将复选框的单击功能声明在输入框的单击功能的范围之外。此外，由于您的复选框是动态生成的，因此您需要使用以下语法：

$(document).on('click','.checkbox',function() {
  $(this).prev().toggleClass("strikethrough");
}

因此，完整的JQuery代码应该如下所示：

$(document).ready(function() {
    $(".input-button").click(function(evt){
        evt.preventDefault();
        var value = $(".input-box").val();
        var item = "<div class='item-box'> <h3 class='item-text'>" + value + "</h3> <input type='checkbox' class='checkbox'> <i class='fa fa-trash fa-2x bin-button' aria-hidden='true'></i> </div>";
        $(".main").append($(item));
    }); 
    $(document).on("click", ".bin-button", function() {
        $(this).parent().remove();
    });
    $(document).on("click", ".checkbox", function() {
        $(this).prev().toggleClass("strikethrough");
    });
});

---

这是因为您正在用这段代码注册很多很多事件：

    $(".bin-button").click(function() {
        $(this).parent().remove();
    });
    $(".checkbox").click(function() {
      ...
    });

因此，对于添加的每个todo，注册到该复选框的事件数将增加

例如：第一个todo，生命是美好的，一个事件被登记。第二个todo本身可以正常工作，但第一个todo现在有两个事件绑定到复选框。这意味着toggleClass被调用两次

例如，执行类似操作将显示单击事件被触发多次：

let called = 0;
$(document).ready(function() {
    $(".input-button").click(function(evt){
        evt.preventDefault();
        var value = $(".input-box").val();
        var item = "<div class='item-box'> <h3 class='item-text'>" + value + "</h3> <input type='checkbox' class='checkbox'> <i class='fa fa-trash fa-2x bin-button' aria-hidden='true'></i> </div>";
        $(".main").append(item);
        $(".bin-button").click(function() {
            $(this).parent().remove();
        });
        $(".checkbox").click(function() {
      called++;
            $(this).prev().toggleClass("strikethrough");
      console.log(called);
        });
    }); 
});

$(document).ready(function() {
    $(".input-button").click(function(evt){
        evt.preventDefault();
        var value = $(".input-box").val();
        var item = "<div class='item-box'> <h3 class='item-text'>" + value + "</h3> <input type='checkbox' class='checkbox'> <i class='fa fa-trash fa-2x bin-button' aria-hidden='true'></i> </div>";
        $(".main").append($(item));
    }); 
    $(document).on("click", ".bin-button", function() {
        $(this).parent().remove();
    });
    $(document).on("click", ".checkbox", function() {
        $(this).prev().toggleClass("strikethrough");
    });
});

    $(".bin-button").click(function() {
        $(this).parent().remove();
    });
    $(".checkbox").click(function() {
      ...
    });

let called = 0;
$(document).ready(function() {
    $(".input-button").click(function(evt){
        evt.preventDefault();
        var value = $(".input-box").val();
        var item = "<div class='item-box'> <h3 class='item-text'>" + value + "</h3> <input type='checkbox' class='checkbox'> <i class='fa fa-trash fa-2x bin-button' aria-hidden='true'></i> </div>";
        $(".main").append(item);
        $(".bin-button").click(function() {
            $(this).parent().remove();
        });
        $(".checkbox").click(function() {
      called++;
            $(this).prev().toggleClass("strikethrough");
      console.log(called);
        });
    }); 
});

let called = 0;
$(document).ready(function() {
    $(".input-button").click(function(evt){
        evt.preventDefault();
        var value = $(".input-box").val();
        var item = $("<div class='item-box'> <h3 class='item-text'>" + value + "</h3> <input type='checkbox' class='checkbox'> <i class='fa fa-trash fa-2x bin-button' aria-hidden='true'></i> </div>");
    item.find(".bin-button").click(function() {
            $(this).parent().remove();
        });
    item.find(".checkbox").click(function() {
      called++;
            $(this).prev().toggleClass("strikethrough");
      console.log(called);
        });
        $(".main").append(item);
    }); 
});