Javascript 如果最后一个子元素发生更改，如何将单击事件绑定到最后一个子元素？

假设我们正在制作一个待办事项列表，我如何在单击最后一个列表项时追加一个新的列表项。 在下面的示例代码中，第四个列表项保留了click事件，但我希望它每次都位于最后一个列表项上

<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>

$（'#foo li:last child'）。绑定（“单击”，函数（）{
var li=$（this.clone（）；
$（'#foo'）。附加（li）；
})

我尝试的是绑定而不是live

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

---

对于jquery 1.7+，请使用以下命令：

试试这个

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

而是使用

.on（）

和

.off（）

试试这个：

对于jquery 1.7+，请改用.on（）

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

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

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