Why aren't my functions working with new added Elements?

var newTask = $("#new-task");
var addButton = newTask.siblings(":button");
var incompleteTasks = $("#incomplete-tasks");
var editButton = $(".edit");
var deleteButton = $(".delete")
var completedCheck = $("input[type='checkbox']");

addButton.on("click", function (){
  var userInput = newTask.val();
  incompleteTasks.append("<li><input type=\"checkbox\"><label class=\"lbl\">" + userInput + "</label><input type=\"text\"><button class=\"edit\">Edit</button><button class=\"delete\">Delete</button></li>");
  newTask.val("");
});

editButton.on("click", function (){
  console.log("check");
if ($(this).parent().hasClass("editMode")===false) {
  $(this).siblings("input[type=\"text\"]").val($(this).siblings(".lbl").html());
  $(this).parent().addClass("editMode");
} else {
  $(this).siblings(".lbl").html($(this).siblings("input[type=\"text\"]").val());
  $(this).parent().removeClass("editMode");
}
});

deleteButton.on("click", function () {
  $(this).parent().remove();
});

completedCheck.on("change",function () {
  if($(this).prop("checked")===true) {
    $(this).parent().appendTo($("#completed-tasks"));
  } else {
    $(this).parent().appendTo($("#incomplete-tasks"));
  }
});