声明的jQuery函数不适用于新创建的项目

Question

此函数将<button>替换为<button> <input>和<button> ：

<button id="add3" class="button">Add...</button>



$(function(){
   $('#add3').click(function () {
      $(this).replaceWith('<input id="edit3" class="input" type="text" placeholder="Enter 3-rd option..." /><button id="add4" class="button">Add...</button>');
    });
 });

因此，当您按下“添加...”按钮时，将出现一个输入字段，并且还会显示另一个“添加...” <button>

我想做的下一件事是用一个<input>字段替换新创建的Add <button> ，因为限制是4个输入字段。 我可以通过运行以下功能来做到这一点：

$(function(){
    $('#add4').click(function() {
        $(this).replaceWith('<input id="edit4" class="input" type="text" placeholder="Enter 4-th option..." />');
    });
});

但事实是，正如我猜想的那样，它并未将已声明的功能应用于新创建的元素。 有什么办法可以使其运行？

谢谢您的回复！

Answer 1

您需要使用.on（）使用事件委托

http://jsfiddle.net/r2gCu/

$('#add3').click(function () {
      $(this).replaceWith('<input id="edit3" class="input" type="text" placeholder="Enter 3-rd option..." /><button id="add4" class="button">Add...</button>');
    });

 $(document).on('click','#add4' ,function() {
        $(this).replaceWith('<input id="edit4" class="input" type="text" placeholder="Enter 4-th option..." />');
    });

当您仅绑定click事件时，它将仅绑定到现有DOM元素，因此您要将事件绑定到父元素（例如：-我使用过文档，但可以使用像div这样已经存在的容器或其他内容），然后您使用与该容器相同的选择器添加的任何元素都可以通过委派使用该事件。

从Jquery Docs

委派事件的优势在于，它们可以处理来自后代元素的事件，这些事件在以后的时间添加到文档中。 通过选择保证在附加委托事件处理程序时会出现的元素，您可以使用委托事件来避免频繁附加和删除事件处理程序的需要。 例如，如果事件处理程序想要监视文档中的所有冒泡事件，则此元素可以是Model-View-Controller设计中视图的容器元素，也可以是文档。 在加载任何其他HTML之前，document元素位于文档的开头，因此可以在其中附加事件，而不必等待文档准备就绪。