jQuery点击事件触发多次

<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>

所有关于 .on() 和 .one() 的东西都很好，而且 jQuery 也很好。

但是有时候，你希望更明显地告诉用户不能点击，在这种情况下，你可以像这样做：

function funName(){
    $("#orderButton").prop("disabled", true);
    //  do a bunch of stuff
    // and now that you're all done
    setTimeout(function(){
        $("#orderButton").prop("disabled",false);
        $("#orderButton").blur();
    }, 3000);
}

<button onclick='funName()'>Click here</button>

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

这种情况通常是由于特定事件被多次绑定到同一元素上所导致的。

我使用的解决方案是：

使用.die()方法取消所有已连接的事件。

然后再附加您的方法侦听器。

这样就可以避免该问题的出现。

$('.arrow').click(function() {
// FUNCTION BODY HERE
}

should be:

$('.arrow').die("click")
$('.arrow').click(function() {
// FUNCTION BODY HERE
}

我曾遇到一个动态生成的链接问题：

$(document).on('click', '#mylink', function({...do stuff...});

我发现将document替换为'body'可以解决这个问题：

$('body').on('click', '#mylink', function({...do stuff...});

"Original Answer"译作"最初的回答"。

.one 只在页面的生命周期中触发一次。

所以如果您想进行验证，这不是正确的解决方案，因为当您在验证后没有离开页面时，您永远不会回来。最好使用

$(".bet").on('click',function() 
{ //validation 
   if (validated) { 
      $(".bet").off('click'); //prevent to fire again when we are not yet off the page
      //go somewhere
    }
});

$(element).click(function (e)
{
  if(e.timeStamp !== 0) // This will prevent event triggering more then once
   {
      //do your stuff
   }
}

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

改为

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

同时还需要为静态和动态点击制作单独的处理程序，对于静态选项卡点击

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

https://jsfiddle.net/0vgchj9n/1/

<div id="testDiv">
  <button class="testClass">Test Button</button>
</div>

…

var subscribeClickEvent = function() {$("#testDiv").one("click", ".testClass", clickHandler);};

function clickHandler() {
  //... perform the tasks  
  alert("you clicked the button");
  //... subscribe the click handler again when the processing of current click operation is complete  
  subscribeClickEvent();
}

subscribeClickEvent();

参考@Pointy的答案。如果这是一个循环，可以通过像这样做来避免点击事件多次触发：

 $(".bet").each(function(i,item){
       $(this).on({
            click:function(){
                //TRIGGERS ONES
            if(i){
              console.log(i); 
                //DO YOUR THING HERE
            }
            
            }
        });

});