Question

Assume we’re making a to-do list, How can I append a new list item whenever the last list item is clicked.
In the example code below, the fourth list item retains the click event, but I would like it to be on the last list item each time.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.js" type="text/javascript"></script>

<ul id="foo">
<li><input placeholder="One"></input></li>
<li><input placeholder="Two"></input></li>
<li><input placeholder="Three"></input></li>
<li><input placeholder="Click Me Add More"></input></li>
</ul>

<script>
    $('#foo li:last-child').bind( "click", function(){
        var li = $(this).clone();
        $('#foo').append(li);
    })
</script>

Answer 1

For jquery 1.7+, use this:

http://jsfiddle.net/NeQ5q/

 $('#foo').on( "click","li:last-child", function(){
        var li = $(this).off('click').clone();
        $('#foo').append(li);
    })​