jquery on click 功能仅在双击时起作用

Question

我对 jquery 函数 on.click 有疑问。 我有一个按钮，当我双击它时会打开一个淡入淡出的模式，但是如果我单击它一次，什么也不会发生。我不知道我在哪里做错了。该按钮具有使用 CSS 制作的悬停效果。这种悬停效果是否会干扰按钮点击？

下面我发布我的代码。谢谢

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>

Answer 1

您想要实现的目标不是很清楚，并且您提供的代码不起作用。

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

要修复它，您应该将函数更改为：

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

另外，考虑一下来自 JS 的事件绑定，避免 onclick 和类似的结构，更喜欢这样：

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

Answer 2

这是对点击事件的完全错误使用。

<button class="d-flex align-self-end float-right ico_doc btn" onclick="openModal();currentSlide(1);fadeIn();" id="tasto1" type="button">

您有一个按钮，您可以在其中内联调用点击 function function fadeIn() { 女巫然后在同一个按钮上设置另一个点击事件......这根本没有意义。

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

你将像以前一样内联进行函数调用

onclick="openModal();currentSlide(1);fadeIn();"

然后在里面做你需要的一切：

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

或者你不会调用它内联并使用 jQuery 设置它：

onclick="openModal();currentSlide(1)"

$("#tasto1").on('click', function() {
  $("#myModal").fadeIn(600);
})

请阅读如何add events