JavaScript/Jqueryイベントの問題

Question

私はちょうど修正することができない小さなバグに遭遇しましたが、私は最後の数日にわたってリストを作成しています。

問題は... To Doを「現在のドス・リスト」から「ドス・リストに完了」に移動すると、「完了したドス」ページのビン・アイコンから個々に削除することはできません。

これは私のコードが混乱するかもしれないか、いくつかの悪い習慣を見るかもしれないので、私はこれに新しいです。もしあなたが気づいたら、これも自由に言って、私は学ぶことができます。 :)

ここをクリックしてください！任意の助けを事前に https://codepen.io/beezeecode/pen/EvmBGo

// Transfer Li from Current to completed. 
$("ul").on("click", ".move", function(){ 
    $(this).parent().remove().appendTo("#container1"); 
    $(this).parent().removeClass("move comp").addClass("appendToDo comp2 comp1"); 
    $(this, ':nth-child(2)').remove(); 
}); 

// Delete a To dos present in the COMPLETED list. 

$("#delComp").on("click", ".delSpan", function(){ 
    $(this).fadeOut(500,function(){ 
    $(this).remove(); 
    }); 
}); 

ありがとう！あなたがリスト間li要素を移動するときに含むdiv代わりのulにそれらを追加しているので

Answer 1

問題があります。これは、削除ボタンの委任されたイベントが添付されていないことを意味します。主な問題は、完成した藤堂はもうULではないので、liはダングリングなしていることである

$(this).parent().remove().appendTo("#delComp"); 

Updated Codepen

Answer 2

：これはあなたの.moveハンドラ内appendTo()コールを修正修正するには

親のulのように、ここで使用されるセレクタ$("ul").on("click", ".delSpan",は再び動作しません。

したがって、修正は行いますが、obs erve appendToに加えられた変更#container1 > #delComp

// Transfer Li from Current to completed. 
$("ul").on("click", ".move", function(){ 
    $(this).parent().remove().appendTo("#container1 > #delComp"); 
    $(this).parent().removeClass("move comp").addClass("appendToDo comp2 comp1"); 
    $(this, ':nth-child(2)').remove(); 
}); 

Answer 3

問題があなたの<li>は天才です代わりに#delComp <ul>