在不使用遞歸的情況下刷新 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>