Question

此功能将<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>

我要做的下一件事是用新的<button>字段替换新创建的添加<input>，因为限制是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文档

委托事件的优势在于它们可以处理来自稍后添加到文档的后代元素的事件。通过选择在附加委托事件处理程序时保证存在的元素，您可以使用委派事件来避免频繁附加和删除事件处理程序的需要。例如，此元素可以是模型 - 视图 - 控制器设计中视图的容器元素，如果事件处理程序想要监视文档中的所有冒泡事件，则可以是文档。在加载任何其他HTML之前，文档元素在文档的头部可用，因此可以安全地将事件附加到那里而无需等待文档准备就绪。

陈述的jQuery函数不适用于新创建的项目

1 个答案: