Question

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

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

当我单击第一个字段上的添加时，问题来了，它将创建多于一个的新字段（由于递归而发生）

如何刷新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>

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

2 个答案: