javascript - 如果用户在没有选择文件的情况下打开并关闭它，如何防止将输入文件加倍

Question

我想当用户选择一个文件时会创建另一个输入文件但是当用户打开它并关闭它而不选择文件然后他再次打开它并选择一个时我的代码会创建两个输入如果他打开和关闭 3 次，然后选择一个，创建了 4 个输入。 如果他第一次选择了一个文件，那么只会创建一个

<div class="gal-stf">
    <input class="plus-n" type="file">
      <p class="bt"></p>
  </div>
      <div class="ad-photo" style="display: none;">

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

$(".gal").on("click", ".plus-n", function () {

              var el = $(this).val();
              $(this).change(function () {
        $('.gal').append($('.ad-photo .gal-stf').last().clone(false));
                  $(this).prop('disabled' , 'disabled');
                  $(this).siblings('p').text(this.value);
      });
    });

Answer 1

实际上，它的发生是因为您在每次点击时都绑定(bind)了事件处理程序，所以 3 单击意味着 3 个不同的处理程序，每个都会在更改事件发生时触发。使用事件委托(delegate)代替监听点击事件直接监听更改事件。

$(".gal").on("change", ".plus-n", function() {
  $('.gal').append($('.ad-photo .gal-stf').last().clone(false));
  $(this).prop('disabled', 'disabled');
  $(this).siblings('p').text(this.value);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="gal">
  <div class="gal-stf">
    <input class="plus-n" type="file">
    <p class="bt"></p>
  </div>
  <div class="ad-photo" style="display: none;">

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