Trouble with .children() not finding newly prepended <li>

Trouble with .children() not finding newly prepended <li>

I'm totally new to jQuery/JS and am just trying to work on some basic skills I recently learned by creating a basic To Do list in which:

  1. User inputs text into a textarea.
  2. Prepend that text as a new <li> to a list (ul .to-do) using .prependTo()
  3. Once the new <li> is added, the user should be able to click it to change the class to "complete"

Everything works except the last step.

addClass()  does not work when the new <li> is added by the user. When I open up the inspector, I see that there is no event handler on the newly prepended <li> – so it's no wonder that it doesn't work, but why is the event handler not being passed through?

I am trying to select the new <li> using  $('.to-do').children() – I suspect that the only <li> recognized as a child of .to-do is the one that existed upon loading the document (see the 'hi' <li> in the link below). Is that correct? Is there a way to add some sort of check to recognize all new <li>s under the parent <ul>?

Link to what I'm working on: http://jennym.us/experiments/todolist/

Any help is very much welcome – thanks!