jQuery点击事件多次触发

我试图在Javascript中编写一个视频扑克游戏，作为一种获得它的基础知识的方式，我遇到了一个问题，jQuery点击事件处理程序被多次触发。

They're attached to buttons for placing a bet, and it works fine for placing a bet on the first hand during a game (firing only once); but in betting for the second hand, it fires the click event twice each time a bet or place bet button is pressed (so twice the correct amount is bet for each press). Overall, it follows this pattern for number of times the click event is fired when pressing a bet button once--where the ith term of the sequence is for the betting of the ith hand from the beginning of the game: 1, 2, 4, 7, 11, 16, 22, 29, 37, 46, which appears to be n(n+1)/2 + 1 for whatever that's worth--and I wasn't smart enough to figure that out, I used OEIS. :)

这是一个点击事件处理程序的函数;希望这很容易理解(如果不容易，请告诉我，我也想在这方面做得更好):

/** The following function keeps track of bet buttons that are pressed, until place button is pressed to place bet. **/
function pushingBetButtons() {
    $("#money").text("Money left: $" + player.money); // displays money player has left

    $(".bet").click(function() {
        var amount = 0; // holds the amount of money the player bet on this click
        if($(this).attr("id") == "bet1") { // the player just bet $1
            amount = 1;
        } else if($(this).attr("id") == "bet5") { // etc.
            amount = 5;
        } else if($(this).attr("id") == "bet25") {
            amount = 25;
        } else if($(this).attr("id") == "bet100") {
            amount = 100;
        } else if($(this).attr("id") == "bet500") {
            amount = 500;
        } else if($(this).attr("id") == "bet1000") {
            amount = 1000;
        }
        if(player.money >= amount) { // check whether the player has this much to bet
            player.bet += amount; // add what was just bet by clicking that button to the total bet on this hand
            player.money -= amount; // and, of course, subtract it from player's current pot
            $("#money").text("Money left: $" + player.money); // then redisplay what the player has left
        } else {
            alert("You don't have $" + amount + " to bet.");
        }
    });

    $("#place").click(function() {
        if(player.bet == 0) { // player didn't bet anything on this hand
            alert("Please place a bet first.");
        } else {
            $("#card_para").css("display", "block"); // now show the cards
            $(".card").bind("click", cardClicked); // and set up the event handler for the cards
            $("#bet_buttons_para").css("display", "none"); // hide the bet buttons and place bet button
            $("#redraw").css("display", "block"); // and reshow the button for redrawing the hand
            player.bet = 0; // reset the bet for betting on the next hand
            drawNewHand(); // draw the cards
        }
    });
}

如果你有任何想法或建议，或者我的问题的解决方案与这里的另一个问题的解决方案相似，请告诉我(我看过许多类似标题的帖子，但没有幸运地找到一个适合我的解决方案)。

当前回答

。()

更好的选择是.one():

每个事件类型的每个元素最多执行一次处理程序。

$(".bet").one('click',function() {
    //Your function
});

如果有多个类，且每个类需要点击一次，

$(".bet").on('click',function() {
    //Your function
    $(this).off('click');   //or $(this).unbind()
});

2014-06-14 09:21:47

其他回答

所有关于.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>

2016-09-08 07:22:51

这个解决方案对我很有效。当您的元素添加动态时，您需要这样做来实现它。这个答案可能是为将来的用户检查。

$("body").off("click", ".Element").on("click", ".Element", function(e){
     e.preventDefault();
    //Your code here 
});

2022-08-01 06:14:11

试试这个方法:

<a href="javascript:void(0)" onclick="this.onclick = false; fireThisFunctionOnlyOnce()"> Fire function </a>

2018-05-30 11:36:15

因为加价，我遇到了一个问题。

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

你注意到我在html中有两次相同的类'myclass'，所以它为每个div实例调用click。

2015-09-18 09:58:44

如果您在每次“单击”时调用该函数，那么它将在每次调用时添加另一对处理程序。

使用jQuery添加处理程序并不像设置“onclick”属性的值。可以根据需要添加任意数量的处理程序。

2013-02-20 00:03:58

jQuery点击事件多次触发

推荐文章

最新文章

标签