使用后取消绑定点击功能

Question

我做了一个井字游戏,我现在想知道如何在点击后使按钮无法点击.这是游戏领域:

<div id="gamefield">
    <table border="0">
        <tr>
            <td><img alt="" title="" src="img/empty.jpg" /></td>
            <td><img alt="" title="" src="img/empty.jpg" /></td>
            <td><img alt="" title="" src="img/empty.jpg" /></td>
        </tr>
        <tr>
            <td><img alt="" title="" src="img/empty.jpg" /></td>
            <td><img alt="" title="" src="img/empty.jpg" /></td>
            <td><img alt="" title="" src="img/empty.jpg" /></td>
        </tr>
        <tr>
            <td><img alt="" title="" src="img/empty.jpg" /></td>
            <td><img alt="" title="" src="img/empty.jpg" /></td>
            <td><img alt="" title="" src="img/empty.jpg" /></td>
        </tr>
    </table>
</div>

这是randomstart函数:

var randomStart = Math.floor(Math.random() * 2);

这是游戏领域的功能:

$("#gamefieldtr td").click(function() {
    if ($(".game-button").html() == "Start spel") {
        alert("you can't start");
    } else {
        if(randomStart == 0){
            var val = $(this).children().attr('src', 'img/cross.jpg');
            randomStart = 1;
            $("#playerTurn").html("1");
            $("#turnImg").attr("src", "img/circle.jpg");
        }
        else {
            var val = $(this).children().attr('src', 'img/circle.jpg');
            randomStart = 0;
            $("#playerTurn").html("0");
            $("#turnImg").attr("src", "img/cross.jpg");
            $('src', 'img/circle.jpg').unbind("click");
        }
    }
});

Answer 1

只需使用jquery的one()而不是click()来添加事件处理程序:

.one(events [,data],handler)返回:jQuery

描述:将处理程序附加到元素的事件.每个事件类型的每个元素最多执行一次处理程序.

版本已添加:1.1.one(events [,data],handler)

以下是代码的外观:

$('#gamefieldtr td').one('click', function (event) {
  // your logic here
})

添加了one()的处理程序会在触发后自动删除,因此您无需自行执行此操作.