Javascript 声明的jQuery函数没有'；无法使用新创建的项

此功能将

替换为

和

：

添加。。。
$（函数（）{
$（'#add3'）。单击（函数（）{
$（this.replacetwith（'Add…'）；
});
});

所以当你按下Add。。。按钮时，会出现一个输入字段和另一个添加<代码>

我想做的下一件事是将新创建的Add

替换为一个

字段，因为限制是4个输入字段。我将通过运行此函数来实现这一点：

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

$（函数（）{
$（'#add4'）。单击（函数（）{
$（此）。替换为（“”）；
});
});

但问题是，正如我所推测的，它不会将已经声明的函数应用于新创建的元素。有办法让它运行吗

---

谢谢你的回复

您需要使用

$（'#add3'）。单击（函数（）{
$（this.replacetwith（'Add…'）；
});
$（文档）。在（'单击'，'添加4'，函数（）上{
$（此）。替换为（“”）；
});

当您仅绑定一个click事件时，它将只绑定到现有的DOM元素，因此您希望将该事件绑定到父元素（例如：-我使用了document，但您可以使用已经存在的容器，如div之类），稍后，您使用与该容器相同的选择器添加的任何元素都将具有委派可用的事件

来自Jquery文档

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

---

您需要使用

$（'#add3'）。单击（函数（）{
$（this.replacetwith（'Add…'）；
});
$（文档）。在（'单击'，'添加4'，函数（）上{
$（此）。替换为（“”）；
});

当您仅绑定一个click事件时，它将只绑定到现有的DOM元素，因此您希望将该事件绑定到父元素（例如：-我使用了document，但您可以使用已经存在的容器，如div之类），稍后，您使用与该容器相同的选择器添加的任何元素都将具有委派可用的事件

来自Jquery文档

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

---

谢谢您的回复！=）@克里斯里玛是你要找的吗？是的。我通过谷歌搜索找到了它，但不知道如何在我的代码中应用它。所以我决定问这里谢谢你的回复！=）@克里斯里玛是你要找的吗？是的。我通过谷歌搜索找到了它，但不知道如何在我的代码中应用它。所以我决定在这里问

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

$('#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..." />');
    });