jquery - fadeOut() 函数仅适用于第一项

Question

我最近一直在玩 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);

Answer 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();
});