Why does the bindTaskEvents loop work?

Looking over the code from that course, it looks like you're referring to the two for loops which are iterating over the existing items in the incompleteTasksHolder and completedTasksHolder lists. This works because they're calling the bindTaskEvents function on each existing task list item when the page initially loads.

// This for loop iterates over each existing task list item when the page loads, and calls the bindTaskEvents function.
for (var i = 0; i < incompleteTasksHolder.children.length; i++) {
  // Here we call the bindTaskEvents function on the current list item. This is where the onclick events get bound.
  bindTaskEvents(incompleteTasksHolder.children[i], taskCompleted);
}

You are correct that these for loops do not effect new items, they are only run when the page first loads. The bindTaskEvents function is what handles attaching the relevant events to new list items. This function is called on existing items when the page loads using the for loop above, but it is also called when you create new items, and when you move items from one list to the other.

Every time the bindTaskFunction is called, each of the buttons have their onclick event bound to their respective functions.

var bindTaskEvents = function(taskListItem, checkBoxEventHandler) {
  // Note - I removed some code here to shorten the block for forum posting.

  // The three lines below bind each button to their respective functions.
  // The function is then called whenever the button is clicked.
  editButton.onclick = editTask;
  deleteButton.onclick = deleteTask;
  checkBox.onchange = checkBoxEventHandler;
}

Hopefully that clears up some things, but please let me or Jacob Mishkin know if it still seems confusing. Happy coding!