Beezee Beezee - 1 year ago 64
jQuery Question

JavaScript/Jquery event problems

I have been creating a to do list over the last few days although I've run into a small bug that I just can not fix.

The problem is... When I move a To Do from the "current to dos list" to the "Completed to dos list" they can not be deleted individually on the "completed to dos" page through the bin icon.

I am new to this so my code may be a mess or you may see some bad practices. If you do notice this feel free to say that as well so i can learn. :)

VIEW FULL PROJECT HERE!
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();
});
});


Thanks in advance for any help!

Answer Source

The issue is because when you move the li elements between lists you're appending them to the containing div instead of the ul. This in turn means that the delegated event on the delete button is not attached.

To fix this amend the appendTo() call in your .move handler:

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

Updated Codepen

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download