jquery on click function work only on double click

Question

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";
  });
}





  
    
      
        Modal title
        
      
      

        
          1 / 4
          
        

        
          1 / 4
          
        


        
          2 / 4
          
        

        
          3 / 4
          
        

        
          4 / 4
          
        

        
        ❮
        ❯

Greedo · Accepted Answer

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

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);
}

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 on click function work only on double click

Answers (2)

Related Questions