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，因此这些元素将无法使用所有事件，因此在这种情况下您需要应用 { {3}} 技术，以便将这些事件附加到这些新添加的元素：

$(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 + '">');
});

<强> event delegation

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

单击“仅侦听器运行一次”

2 个答案: