时间戳

首页 > 解决方案 > 如何防止事件进入无限循环？

jquery - 如何防止事件进入无限循环？

问题描述

我插入了取自 mdbootstrap 的按钮来加载简历和求职信，我隐藏了两个输入字段并连接了 jquery 以单击给定元素以作用于打开加载窗口的真实输入。问题是，如果我使用该指令.on('click', ...)，它会进入一个无限递归循环，而如果我使用.one ("click", ...)它只会执行一次，从而阻止所有用户重新打开上传（例如：加载错误的文件）。
请对上述查询提供帮助以下是 HTML、CSS、JS 代码。

<div class="form-group col-lg-12">
   <div>
      <div class="file-field" id="carica_cv">
         <div class="btn blue-gradient btn-sm float-left">
            <i class="fas fa-cloud-upload-alt mr-2" aria-hidden="true"></i>
            <span>Carica il tuo Curriculum Vitae</span>
            <input name="cv" id="cv" type="file"/>
         </div>
      </div>
   </div>
   <div>
      <div class="file-field carica_lettera">
         <div class="btn blue-gradient btn-sm float-left">
            <span>
            <i class="fas fa-cloud-upload-alt mr-2 carica_lettera" aria-hidden="true"></i>
            Carica Lettera di Presentazione
            <input name="lettera" id="lettera" type="file">
            </span>
         </div>
      </div>
   </div>
   <div>
   </div>
</div>  

<!-- Jquery 3.4.0 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>   

<!-- Bootstrap tooltips -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>

<!-- Bootstrap core JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

<!-- MDB core JavaScript -->
<script  src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.11/js/mdb.min.js"></script>

.file-field,
.carica_cv,
.carica_lettera {
  cursor: pointer;
}

input[type="file"] {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  filter: alpha(opacity=0);
  opacity: 0;
}

input[type="file"]#cv {
  background-color: lime;
  left: 63%;
}

input[type="file"]#lettera {
  background-color: red;
  left: 80%;
}

$(document).ready(function () {
   $("#carica_cv").on("click", function () {
      //alert("Curriculum");
      $('#cv').click();
   })

   $(".carica_lettera").one("click", function () {
      alert("Lettera");
      $('#lettera').click();
   })



//Add file name to label(Show file names under the buttons, on the left) 
       $("#lettera").change(function () {
          $("#nome-lettera").text(this.files[0].name);
       });

       $("#cv").change(function () {
          $("#nome-cv").text(this.files[0].name);
       });

    })

显示文件名的代码是否正确？

标签： jqueryformsfileinput

解决方案

您可以只使用标签而不需要任何 JavaScript 代码。

<div class="form-group col-lg-12">
   <div>
      <label for="cv" class="file-field" id="carica_cv">
         <div class="btn blue-gradient btn-sm float-left">
            <i class="fas fa-cloud-upload-alt mr-2" aria-hidden="true"></i>
            <span>Carica il tuo Curriculum Vitae</span>
            <input name="cv" id="cv" type="file"/>
         </div>
      </label>
   </div>
   <div>
      <label for="lettera" class="file-field carica_lettera">
         <div class="btn blue-gradient btn-sm float-left">
            <span>
            <i class="fas fa-cloud-upload-alt mr-2 carica_lettera" aria-hidden="true"></i>
            Carica Lettera di Presentazione
            <input name="lettera" id="lettera" type="file">
            </span>
         </div>
      </label>
   </div>
   <div>
   </div>
</div>

如果您真的想使用 JavaScript 进行点击，您需要查看点击了什么。如果是输入，则忽略它。

$(".file-field").on("click", function (e) {
  const isInput = $(e.target).is("input")
  if (!isInput) {
    $(this).find("input").click()
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group col-lg-12">
   <div>
      <div class="file-field" id="carica_cv">
         <div class="btn blue-gradient btn-sm float-left">
            <i class="fas fa-cloud-upload-alt mr-2" aria-hidden="true"></i>
            <span>Carica il tuo Curriculum Vitae</span>
            <input name="cv" id="cv" type="file"/>
         </div>
      </div>
   </div>
   <div>
      <div for="lettera" class="file-field carica_lettera">
         <div class="btn blue-gradient btn-sm float-left">
            <span>
            <i class="fas fa-cloud-upload-alt mr-2 carica_lettera" aria-hidden="true"></i>
            Carica Lettera di Presentazione
            <input name="lettera" id="lettera" type="file">
            </span>
         </div>
      </div>
   </div>
   <div>
   </div>
</div>

推荐阅读