new elements don't work even with .on()

Question

When I create new TASKs the "edit" (to save changes) and "delete" links stops working. What it wrong here?

I am using .on() but it doesn't work with new elements.

<ul id="incomplete-tasks">
 <li>
      <input type="checkbox"><label>Pay Bills</label>
      <input type="text">
      <button class="edit">Edit</button>
      <button class="delete">Delete</button>
 </li>
 </ul>

//Add new TASK
 $('#addButton').click(function(){
 $("#incomplete-tasks").append('<li><input type="checkbox"><label>' + $('#new-task').val() + '</label><input type="text"><button class="edit">Edit</button><button class="delete">Delete</button></li>')
 });

 //Show edit mode
 $("#incomplete-tasks").on("click", ".edit", function() {

 //show
 $(this).parent().toggleClass('editMode');

 //Add label value = edit field text
 var $label = $(this).children().find('label').text();
 $(this).children().find('input[type=text]').val($label);
 });

 //Save changes when "edit"is clicked again 
 $('.edit').on("click", function() {
 var value = $(this).parent().find('input[type=text]').val();
 $(this).parent().find('label').text(value);
 });

 //delete task 
 $('.delete').on("click", function() {
 $(this).parent().hide();
 });

FULL CODE -- http://codepen.io/tsalexey544/pen/LEqbpV?editors=101

Answer 1 · 2015-03-24T13:20:54Z

March 24, 2015 1:20pm

So, to use the .on() method so that you can bind functions to newly created objects, you need to attach it to something further up the DOM tree than what you want to use it on. I usually just bind it to the body tag, since I know that will persist permanently on the page. Here's how you use it:

// $("  parent element or higher  ").on("  action   ","  interaction element  " function(){});
$("body").on("click", ".edit", function(){
  //Your code here...
});

Note that if you need to utilize some methods (such as preventDefault()), you will need to include a parameter for the event, in which case you would have something like this:

$("body").on("click", ".edit", function(e){
  e.preventDefault();
  //Your code here...
});

Welcome to the Treehouse Community

Looking to learn something new?

Alexey Tseitlin

Alexey Tseitlin

new elements don't work even with .on()

1 Answer

Ryan Field

Ryan Field

Alexey Tseitlin

Alexey Tseitlin