单击功能上的jQuery仅在双击时有效 [英] jquery on click function work only on double click

问题描述

我在使用jquery函数on.click时遇到问题. 我有一个按钮，当我双击它时，会打开一个模态的淡入淡出，但是如果单击一次，则什么也不会发生.我不知道我在哪里做错了.该按钮具有CSS悬停效果.这种悬停效果可能会干扰按钮的点击吗?

I have an issue with jquery function on.click. I have a button and when I double click on it opens a fade in modal, but if I click it once, nothing happens. I can't figure out where I'm doing wrong. The button has an hover effect made with CSS. Could this hover effect might interferring with button click?

下面，我发布我的代码.谢谢

Below I post my code. Thanks

function fadeIn() {
  $(document).ready(function() {
    var button = $(event.relatedTarget);
    $("#tasto1").on('click', function() {
      $("#myModal").fadeIn(600);
    })
  });
}


// Open the Modal


function openModal() {

  /*document.getElementById("myModal").style.display = "block";*/

  document.querySelectorAll(".seconda_fascia").forEach(function(element) {
    element.style.display = "none";
  });
  document.querySelectorAll(".prima_fascia").forEach(function(element) {
    element.style.display = "inline-block";
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="d-flex align-self-end float-right ico_doc btn" onclick="openModal();currentSlide(1);fadeIn();" id="tasto1" type="button">
                      <img class="card-img" src="imgs/SVG/ICO_DOC.svg" alt="" loading="lazy"  id="ICO_DOC2x_mq"></button>

<div class="modal" tabindex="-1" id="myModal" style="background-color:rgba(33, 37, 41, .15)    /*  10% opaque green */ ">
  <div class="modal-dialog modal-dialog-centered modal-xl m">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="closeModal()">
              <span aria-hidden="true">&times;</span>
            </button>
      </div>
      <div class="modal-body">

        <div class="mySlides" id="prod1">
          <div class="numbertext">1 / 4</div>
          <img src="https://picsum.photos/id/1000/600/300" style="width:100%" alt="">
        </div>

        <div class="mySlides" id="prod2">
          <div class="numbertext">1 / 4</div>
          <img src="https://picsum.photos/id/1050/600/300" style="width:100%" alt="">
        </div>


        <div class="mySlides">
          <div class="numbertext">2 / 4</div>
          <img src="https://picsum.photos/id/600/600/300" style="width:100%" alt="">
        </div>

        <div class="mySlides">
          <div class="numbertext">3 / 4</div>
          <img src="https://picsum.photos/id/87/600/300" style="width:100%" alt="">
        </div>

        <div class="mySlides">
          <div class="numbertext">4 / 4</div>
          <img src="https://picsum.photos/id/18/600/300" style="width:100%" alt="">
        </div>

        <!-- Next/previous controls -->
        <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
        <a class="next" onclick="plusSlides(1)">&#10095;</a>

        <!-- Caption text -->
        <div class="caption-container">
          <p id="caption"></p>
        </div>

        <!-- Thumbnail image controls striscia di Foto piccole nel MODAL  -->
        <div class="row prima_fascia" style="white-space: nowrap;">

          <div class="col-md-3 m-0 p-0 d-inline-block text-center">
            <img class="demo" src="https://picsum.photos/id/1000/600/300" onclick="currentSlide(1)" alt="Nature" style="width:80%">
          </div>

          <div class="col-lg-3  m-0 p-0 d-inline-block text-center">
            <img class="demo" src="https://picsum.photos/id/1050/600/300" onclick="currentSlide(2)" alt="Snow" style="width:80%">
          </div>

          <div class="col-lg-3  m-0 p-0 d-inline-block text-center">
            <img class="demo" src="https://picsum.photos/id/87/600/300" onclick="currentSlide(3)" alt="Mountains" style="width:80%">
          </div>

          <div class="col-lg-3  m-0 p-0 d-inline-block text-center">
            <img class="demo" src="https://picsum.photos/id/18/600/300" onclick="currentSlide(4)" alt="Lights" style="width:80%">
          </div>


        </div>

        <div class="row seconda_fascia " id="demo2">

          <div class="col-lg-3  d-inline-block">
            <img class="demo2" src="https://picsum.photos/id/500/600/300" onclick="currentSlide(5)" alt="Nature" style="width:100%">
          </div>

          <div class="col-lg-3  d-inline-block">
            <img class="demo2" src="https://picsum.photos/id/250/600/300" onclick="currentSlide(6)" alt="Snow" style="width:100%">
          </div>

          <div class="col-lg-3  d-inline-block">
            <img class="demo2" src="https://picsum.photos/id/615/600/300" onclick="currentSlide(7)" alt="Mountains" style="width:100%">
          </div>

          <div class="col-lg-3  d-inline-block">
            <img class="demo2" src="https://picsum.photos/id/49/600/300" onclick="currentSlide(8)" alt="Lights" style="width:100%">
          </div>
        </div>

      </div>
    </div>
  </div>
</div>
<script>
</script>

推荐答案

您要实现的目标尚不清楚，并且您提供的代码无法正常工作.

What you want to achieve is not really clear and the code you provided is not working.

我认为问题出在fadeIn函数中，您在每次迭代时都附加一个事件侦听器.另外，在第一次单击时，将不会执行回调，这似乎是 您描述的问题.

I think the issue is in the fadeIn function, you attach an event listener at each iteration. Also, at the first click the callback won't be executed, and this seems the issue you described.

要修复此问题，您应该将功能更改为:

To fix it, you should change the function to:

function fadeIn() {
  $("#myModal").fadeIn(600);
}

另外，考虑从JS进行事件绑定，避免使用onclick和类似的结构，并且更喜欢这样做:

Also, consider about event binding from JS, avoid onclick and similar structures and prefer this:

$(document).ready(function() {
  $("#tasto1").click(function() {
    openModal();
    currentSlide(1);
    fadeIn();
  });
});

这篇关于单击功能上的jQuery仅在双击时有效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！