点击监听器只运行一次

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