如果最後一個子元素髮生更改，如何將點擊事件綁定到最後一個子元素？

Question

假設我們正在做一個待辦事項列表，每當最後一個列表項被點擊時，我如何附加一個新的列表項。 在下面的示例代碼中，第四個列表項保留了單擊事件，但我希望每次都在最後一個列表項上。

<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

的jQuery 1.7+，使用此：

http://jsfiddle.net/NeQ5q/

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

Answer 2

我試圖綁定，而不是活

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

Answer 3

試試這個

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

而是使用.on()和.off()

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

Check Fiddle

Answer 4

試試這個：http://jsfiddle.net/xu4wc/

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