Question

我希望当用户选择一个文件时，创建另一个输入文件，但是当用户打开该文件并关闭它而不选择一个文件时，用我的代码，然后他再次打开它，然后选择一个，如果他选择了，则会创建2个输入打开和关闭3次，然后选择1，将创建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

实际上，这是因为您在每次单击时都绑定了事件处理程序，所以3单击意味着3个不同的处理程序，并且每个更改事件发生时都会触发。不用监听点击事件，而直接使用事件委托来监听变更事件。

$(".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>

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

1 个答案: