Kindly help me with this code

Question

I have written the to do application list in JQuery. Most of the code works perfectly however there are 2 issues.

1) Edit Task: The edit button works when the list item is in its original incomplete or complete task holder. The moment its marked checked and gets appended to the incomplete or complete task holder..the edit button stops working. The funny thing is edit task gets printed to the console log but the function is not executing. Below is my full code:

var $addButton = $('button')[0];
var $taskInput = $("#new-task");
var $incompleteTaskHolder = $("#incomplete-tasks");
var $completedTaskHolder = $("#completed-tasks");

/*******************************
Create a list item
*******************************/

var $addNewListItem = function() {

  var $listItem = $("<li></li>");

  var $checkBox = $("<input></input>");
  var $label = $("<label></label>");
  var $editInput = $("<input></input>");
  var $deleteButton = $("<button></button>");
  var $editButton = $("<button></button>");

  /******************************
  Modify List Item
  ******************************/

  $checkBox.attr("type", "checkbox");
  $editInput.attr("type", "text");

  $label.text($taskInput.val());

  $editButton.text("Edit");
  $editButton.addClass("edit");

  $deleteButton.text("Delete");
  $deleteButton.addClass("delete");

 /**********************************
 Append children to listItem
 **********************************/

  $listItem.append($checkBox);
  $listItem.append($label);
  $listItem.append($editInput);
  $listItem.append($editButton);
  $listItem.append($deleteButton);

  return $listItem;
}

/****************************
Create user interactivity
****************************/
//Add Task
var $addTask = function() {
  console.log("adding task");
  var $listItem = $addNewListItem();

  $incompleteTaskHolder.append($listItem);

  $listItem.each($bindTaskEvents);

};

// Edit Task
var $editTask = function() {
   console.log("Editing task");

  var $listItem = $(this).parent();
  var $label = $listItem.children("label");
  var $editInput = $listItem.children("input[type=text]");
  var $editButton = $listItem.children(".edit");

  if ($listItem.hasClass("editMode")) {
    $listItem.toggleClass("editMode");
    $label.text($editInput.val());
  }

  else {
    $listItem.toggleClass("editMode");
    $editInput.val($label.text());    
}    
};

// Delete Task
var $deleteTask = function() { 
   console.log("Deleting task");
   $(this).parent().remove();
}

// Complete Task
var $completeTask = function () {
   console.log("Completing task");
   // Append the list item to the incompleteTaskHolder
   var $listItem = $(this).parent();
   $completedTaskHolder.append($listItem);
   $listItem.each($bindTaskEvents);
}

// Incomplete Task
var $incompleteTask = function() {
   console.log("Incomplete task");
   var $listItem = $(this).parent();
   $incompleteTaskHolder.append($listItem);
   $listItem.each($bindTaskEvents);
}

/**********************************
Triggering Events
***********************************/

$($addButton).click($addTask);

/************************************
Cycle over the Incomplete Task Holder
**************************************/

var $bindTaskEvents = function() {

   var $checkBox = $(this).children("input[type=checkbox]");
   var $editButton = $(this).children(".edit");
   var $deleteButton = $(this).children(".delete");

   $editButton.on("click", $editTask);
   $deleteButton.on("click", $deleteTask);

   if ($(this).parent().hasClass("incomplete-tasks")) {

      $checkBox.on("change", $completeTask);  
   }

   else if($(this).parent().hasClass("completed-tasks")) {
      $checkBox.on("change", $incompleteTask);
   }


};

$("#incomplete-tasks li").each($bindTaskEvents); 
$("#completed-tasks li").each($bindTaskEvents);

2)if / else: bindTaskEvent function has and if and else statement because passing an argument to the function does not work for me. I tried to pass in a parameter of checkBoxEventHandler but when I call the function passing the value of complete or incomplete task the function gives me an error. This is what I did before I had to switch to if/else:

var $bindTaskEvents = function(checkBoxEventHandler) {

   var $checkBox = $(this).children("input[type=checkbox]");
   var $editButton = $(this).children(".edit");
   var $deleteButton = $(this).children(".delete");

   $editButton.on("click", $editTask);
   $deleteButton.on("click", $deleteTask);

   $checkBox.on("change", checkBoxEventHandler);

};

$("#incomplete-tasks li").each($completeTask); 
$("#completed-tasks li").each($incompleteTask);

Welcome to the Treehouse Community

Looking to learn something new?

Burhanuddin Oanali

Burhanuddin Oanali

Kindly help me with this code