jQuery click events firing multiple times

Question

I\'m attempting to write a video poker game in Javascript as a way of getting the basics of it down, and I\'ve run into a problem where the jQuery click event handlers are f

Answer 1

I had a problem because of markup.

HTML:

<div class="myclass">
 <div class="inner">

  <div class="myclass">
   <a href="#">Click Me</a>
  </div>

 </div>
</div>

jQuery

$('.myclass').on('click', 'a', function(event) { ... } );

You notice I have the same class 'myclass' twice in html, so it calls click for each instance of div.

Answer 2

Unbind () works, but that might cause other issues in the future. The handler triggers multiple times when it is inside another handler, so keep your handler outside and if you want the values of the handler which had nested, assign them to a global variable that it will be accessible to the your handler.

Answer 3

In my case I was using 'delegate', so none of these solutions worked. I believe it was the button appearing multiple times via ajax calls that was causing the multiple click issue. The solutions was using a timeout so only the last click is recognized:

var t;
$('body').delegate( '.mybutton', 'click', function(){
    // clear the timeout
    clearTimeout(t);
    // Delay the actionable script by 500ms
    t = setTimeout( function(){
        // do something here
    },500)
})

Answer 4

In my case, onclick event was firing multiple times coz I had made a generic event handler comparatively as

  `$('div').on("click", 'a[data-toggle="tab"]',function () {
        console.log("dynamic bootstrap tab clicked");
        var href = $(this).attr('href');
        window.location.hash = href;
   });`

changed to

    `$('div#mainData').on("click", 'a[data-toggle="tab"]',function () {
        console.log("dynamic bootstrap tab clicked");
        var href = $(this).attr('href');
        window.location.hash = href;
    });`

and also have to make separate handlers for static and dynamic clicks, for static tab click

    `$('a[data-toggle="tab"]').on("click",function () {
        console.log("static bootstrap tab clicked");
        var href = $(this).attr('href');
        window.location.hash = href;
    });`

Answer 5

In my case I had loaded the same *.js file on the page twice in a <script> tag, so both files were attaching event handlers to the element. I removed the duplicate declaration and that fixed the problem.

Answer 6

The better option would be using off

<script>
function flash() {
  $("div").show().fadeOut("slow");
}
$("#bind").click(function() {
  $( "body" )
    .on("click", "#theone", flash)
    .find("#theone")
      .text("Can Click!");
});
$("#unbind").click(function() {
  $("body")
    .off("click", "#theone", flash)
    .find("#theone")
      .text("Does nothing...");
});
</script>