在不使用递归的情况下刷新 javascript 的函数

Question

我正在尝试创建一个简单的表单，我可以在当前文本字段之后添加更多文本字段。

而且我还可以从我之前添加的新字段中添加更多字段（为此我使用递归）。

当我单击第一个字段上的添加时出现问题，它会创建超过 1 个新字段（这是由于递归而发生的）

我如何刷新javascripts函数而不一次又一次地调用它？

HTML :

<div class="line-input">
  <input type='text' class='ipt-txt'>
  <input type='submit' class='btn-smt' value="add new">
</div>

JS：

$(document).ready(function(){
    callFunction();
});

function callFunction(){
    $(".btn-smt").click(function(e){
    $(this).parent(".line-input").clone().insertAfter($(this).parent(".line-input"));
    callFunction();
  });
};

JSFiddle： https ://jsfiddle.net/1uofya3k/

谢谢！

Answer 1

使用事件委托：

$(function() {
   $(document).on("click", ".btn-smt", function(e) {
     $(this).parent(".line-input").clone().insertAfter($(this).parent(".line-input"));
   });
});

这会在document级别设置一个事件处理程序，以响应对按钮类的点击。 您只需添加一次，它将适用于所有动态添加的后续元素。

（您甚至不必在“就绪”处理程序中执行此操作；您可以在 DOM 完成之前进行设置。）

Answer 2

将true添加到clone()函数。 来自 jQuery API：

withDataAndEvents（默认值：false） 类型：Boolean 一个布尔值，指示是否应与元素一起复制事件处理程序。 从 jQuery 1.4 开始，元素数据也将被复制。

https://api.jquery.com/clone/

 $(document).ready(function() { callFunction(); }); function callFunction() { $(".btn-smt").click(function(e) { e.stopPropagation(); $(this).parent(".line-input").clone(true).insertAfter($(this).parent(".line-input")); }); };

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="line-input"> <input type='text' class='ipt-txt'> <input type='submit' class='btn-smt' value="add new"> </div>