0

此函数将 a 替换为<button>an<input>和 a <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>');
    });
 });

因此，当您按下 Add... 按钮时，会出现一个输入字段以及另一个 Add...<button>

接下来我要做的是将新创建的 Add 替换为<button>一个<input>字段，因为限制是 4 个输入字段。我会通过运行这个函数来做到这一点：

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

但问题是，它并不像我认为的那样将已经声明的功能应用于新创建的元素。有什么办法让它运行吗？

谢谢您的回复！

4

1 回答 1

5

您需要使用事件委托使用.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..." />');
    });

当你只是绑定一个点击事件时，它只会绑定到现有的 DOM 元素，所以你想将事件绑定到父元素（例如：- 我使用过文档，但你可以使用已经存在的容器，如 div或其他东西），稍后您使用与该容器相同的选择器添加的任何元素都将通过委托获得该事件。

来自 Jquery 文档

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

于 2013-05-01T21:40:39.130 回答