點擊監聽器只運行一次

Question

我有一個點擊監聽器設置爲收聽p a，但它只能工作一次，然後不再。我知道這不是從點擊運行的代碼，這是問題，因爲如果我從控制檯運行它，它運行良好，這是實際的監聽程序不起作用。

監聽器：

$('p a').click(function() { 
    var v = $('p a').prev('input').val(); 
    $('p a').parent('p').after('<p><input type="text"> <a href="#">Add More</a></p>'); 
    $('p a').first().parent('p').html('<input type="text" value="' + v + '">'); 
}); 

DEMO

可能有人請向我解釋爲什麼這個只執行一次？

Answer 1

由於新的段落和錨已經第一錨單擊處理後動態添加到DOM，所有的事件將無法使用這些元素，所以在這種情況下，您需要申請event delegation技術，爲了這些事件附加到這些新加入的元素：

$(document.body).on('click','p a',function() { 
    var v = $('p a').prev('input').val(); 
    $('p a').parent('p').after('<p><input type="text"> <a href="#">Add More</a></p>'); 
    $('p a').first().parent('p').html('<input type="text" value="' + v + '">'); 
}); 

Updated Fiddle

Answer 2

的問題是，你的事件處理程序刪除現有的元素，它的附着和科瑞是一個新的類似的。把你的處理程序放在一個已命名的函數中，並將其重新附加到新創建的元素，並且一切都會正常工作。

function clickHandler() { 
    var v = $('p a').prev('input').val(); 
    $('p a').parent('p').after('<p><input type="text"> <a href="#">Add More</a></p>'); 
    $('p a').first().parent('p').html('<input type="text" value="' + v + '">'); 
    $('p a').click (clickHandler); 
} 
$('p a').click(clickHandler);