fadeOut（）関数は最初の項目だけで動作します

Question

最近私はjQueryで遊んでいましたが、私はこの単純なto-doリストアプリを公開することに決めました。私のコードの問題は、最初の項目ではない項目をチェックすると、​​関数は機能しません。ただし、最初の項目を確認した後、他のすべての項目で作業を開始します。注：最初のアイテムは組み込みであり、残りのアイテムと比べて動的に追加されませんでした。また、すべてのアイテムをチェックアウトした後、新しいアイテムを追加すると機能しません！

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

そうのように試してみてください。

は、これらの線に置き換え：この行

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

Answer 2

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

と

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

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

を最初に "クリック" イベントにremove関数をバインドあなたの最初の既存の.cardのと述べた。これを一度クリックするとremove関数が呼び出され、fadeOut（）関数は現在その時点で存在する.cards（新しく作成されたものを含む）に再バインドされます。しかし、後でそれを追加すると、それが呼び出されたときに存在しなかったので、イベントバインディングを取得しません。初期.onは（「クリック」...任意の既存のカードをバインドするために、あなたの主な機能の終了時に呼び出すことを続けるが、それに追加

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

：

をするには、Remove（）関数を変更してみてくださいすべての新しいコメントがイベント

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