javascript - 尝试如果用户选择文件，则创建一个元素，但是将其加倍

我有一个div，其中有文件input。如果用户选择文件，则应出现另一个div，以允许用户选择另一个文件。但是，当用户选择一个文件时，元素会加倍，而不仅仅是一个。

<div class="gal">
  <div class="gal-stf">
    <input class="plus-n" type="file">
  </div>
</div>

$(".gal").on("click", ".plus-n", function () {
  $(this).last().change(function () {
    $('.gal').append($(".gal-stf").first().clone(true));
  });
});

最佳答案

您的问题是您正在运行.clone(true)而不是.clone(false)。使用true参数克隆它时，将复制元素及其事件侦听器，然后将另一个事件侦听器添加到元素。这意味着当与之交互时，事件侦听器将触发两次，从而创建两个新元素。然后四次，创建四个新元素。

要解决此问题，只需复制没有事件侦听器的元素，就像这样。

$(".gal").on("click", ".plus-n", function () {
  $(this).last().change(function () {
    $('.gal').append($(".gal-stf").first().clone(false));
  });
});