jQuery：如何在jQuery中执行点击后事件

我有一个tic-tac-toe游戏，我的棋盘是一个

，而

是单元格。每次单击td时，它都会附加一个x img或o img

这是我的jQuery代码-注意：检查var，如果已经有五次或更多的点击在棋盘上，那么它将开始检查是否有人已经赢得了游戏

 var player = 1;
 var check = 0;

 $("td").bind("click", function(){
            if(player==1){
                $('<img src="x.png" alt="x" name="x"/>').appendTo(this);
                player=player+1;
                check+=1;
            } else {
                $('<img src="o.jpg" alt="o" name="o"/>').appendTo(this);
                player=player-1;
                check+=1;
            }
        });

起初，我把这段代码放在check+=1行之后，但我立即发现有一个单击延迟，同样的事情也发生在我当前的代码中。我发现，在这两种情况下，当你点击一个td时，它会同时做两件事：它检查是否已经有一个获胜的组合（但bec。图像尚未插入，那么它将什么也不做），并插入img

---

我想我需要的是一个点击后功能，每次插入图像后，它都会检查是否已经有一个成功的组合

将其添加到单击处理程序的末尾

var player = 1;
var check = 0;

$("td").bind("click", function () {
    if (player == 1) {
        $('<img src="x.png" alt="x" name="x"/>').appendTo(this);
        player = player + 1;
        check += 1;
    } else {
        $('<img src="o.jpg" alt="o" name="o"/>').appendTo(this);
        player = player - 1;
        check += 1;
    }

    //just add it after here
    var one = $("#one").children("img").attr("name");
    var two = $("#two").children("img").attr("name");
    var three = $("#three").children("img").attr("name");

    if (check >= 5) {
        if (one == "x" && two == "x" && three == "x") {
            alert("player one wins");
        }
    }
});

var-player=1；
var检查=0；
$（“td”）.bind（“单击”），函数（）{
如果（玩家==1）{
$（''）。附于（本）；
玩家=玩家+1；
检查+=1；
}否则{
$（''）。附于（本）；
玩家=玩家-1；
检查+=1；
}
//在这里后面加上
var one=$（“#one”）.children（“img”）.attr（“name”）；
var two=$（“#two”）.children（“img”）.attr（“name”）；
变量三=$（“#三”）.children（“img”）.attr（“name”）；
如果（检查>=5）{
如果（一==“x”&&2==“x”&&3==“x”）{
警惕（“玩家一胜”）；
}
}
});

演示：

---

问题是，在触发mouseup事件后会触发click事件，因此在mouseup处理程序中，您总是会得到

check

的值

演示：

$("td").mouseup(function(){     
            var one = $("#one").children("img").attr("name");
            var two = $("#two").children("img").attr("name");
            var three = $("#three").children("img").attr("name");

        if(check=>5){
                if(one=="x"&&two=="x"&&three=="x"){
                        alert("player one wins");   
                }
        }

});

var player = 1;
var check = 0;

$("td").bind("click", function () {
    if (player == 1) {
        $('<img src="x.png" alt="x" name="x"/>').appendTo(this);
        player = player + 1;
        check += 1;
    } else {
        $('<img src="o.jpg" alt="o" name="o"/>').appendTo(this);
        player = player - 1;
        check += 1;
    }

    //just add it after here
    var one = $("#one").children("img").attr("name");
    var two = $("#two").children("img").attr("name");
    var three = $("#three").children("img").attr("name");

    if (check >= 5) {
        if (one == "x" && two == "x" && three == "x") {
            alert("player one wins");
        }
    }
});