JavaScript/Jquery event problems

Question

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!

Rory McCrossan · Accepted Answer · 2017-08-16 09:29:07Z

1

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

answered Aug 16, 2017 at 9:29

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Theophilus Omoregbee · Accepted Answer · 2017-08-16 09:35:09Z

0

The main problem is that the Completed Todo is not in an UL anymore, so the li are dangling and no parent like ul, so the selector used here $("ul").on("click", ".delSpan", won't work again,

so the fix is to do , but observe the changes made to the 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();
});

answered Aug 16, 2017 at 9:35

Theophilus Omoregbee

2,5031 gold badge25 silver badges33 bronze badges

Comments

Ricardo Rodrigues · Accepted Answer · 2017-08-16 09:38:05Z

0

The issue is that your <li> is being moved into the #container1 instead of the #delComp <ul>

edited Aug 16, 2017 at 9:38

answered Aug 16, 2017 at 9:37

Ricardo Rodrigues

2,2682 gold badges21 silver badges23 bronze badges

Collectives™ on Stack Overflow

JavaScript/Jquery event problems

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related