fadeOut() 函数仅适用于第一项答案

【问题标题】：fadeOut() function working for only first itemfadeOut() 函数仅适用于第一项
【发布时间】：2017-12-20 13:31:33
【问题描述】：

我最近一直在玩 jQuery，我决定推出这个简单的待办事项列表应用程序。我的代码的问题是，当我检查不是第一项的项目时，fadeOut() 函数不起作用。但是，在检查第一个项目后，它开始适用于所有其他项目。注意：第一项是内置的，与其他项相比不是动态添加的。另外，检查完所有项目后，如果我添加一个新项目，它就不起作用！

var main = function() {

    var addComment = function() {

        var $card;
        var $cardBody;
        var $formCheck;
        var $formCheckLabel;

        if($("#comment").val() !== "") {

            $card = $("<div>").addClass("card bg-success text-white mt-3");
            $cardBody = $("<div>").addClass("card-body");
            $formCheck = $("<div>").addClass("form-check");
            $formCheckLabel = $("<label>").addClass("form-check-label");
            $($formCheckLabel).text($("#comment").val());

            $($formCheckLabel).append('<input type = "checkbox" class="form-check-input shift">');

            $($formCheck).append($formCheckLabel);
            $($cardBody).append($formCheck);
            $($card).append($cardBody);

            $(".todos").append($card);
            $("#comment").val("");

        } 


    };

    var remove = function() {
        $(".card").on("click", function(event) {
            $(this).fadeOut();
        });
    }

    $("#btn").on("click", function(event) {
        addComment();
    });

    $("#comment").on("keypress", function (event) {
        if (event.keyCode === 13) {
            addComment();
        }
    });

    $(".card").on("click", function(event) {
        remove();
    });
};

$(document).ready(main);

【问题讨论】：

谢谢大家！ @caramba 的解决方案运行良好，Jackson 的解释澄清了为什么它不起作用，尽管我在实现代码时遇到了一些麻烦。无论如何，这两种解决方案都非常有用！

标签： jquery html css bootstrap-4

【解决方案1】：

这样试试：

替换那些行：

var remove = function() {
    $(".card").on("click", function(event) {
        $(this).fadeOut();
    });
}

$(".card").on("click", function(event) {
    remove();
});

与

$(document).on("click", ".card", function(event) {
    $(this).fadeOut();
});

【讨论】：

【解决方案2】：

$(".card").on("click", function(event) {
    remove();
});

此行最初将删除函数绑定到您提到的第一个预先存在的 .card 的“单击”事件。因此，单击一次将调用 remove 函数，然后将 fadeOut() 函数重新绑定到当时当前存在的任何 .cards （包括新创建的）。但是，如果您在此之后添加更多内容，它们将不会获得事件绑定，因为它们在被调用时并不存在。

尝试将 remove() 函数更改为：

function remove(event){
    $(event.target).fadeOut()
}

在主函数末尾保留初始 .on("click"... 调用以绑定任何预先存在的卡片，但添加到 addComment() 代码以包含绑定，以便每个新评论都知道要做什么处理事件

...
$($card).append($cardBody);
$($card).on("click",function(event){remove(event)});
$(".todos").append($card);
...

【讨论】：