无法使用 jQuery 检查井字游戏方块是否为空答案

【问题标题】：Not able to check if Tic-tac-toe a square is empty using jQuery无法使用 jQuery 检查井字游戏方块是否为空
【发布时间】：2012-12-25 04:11:27
【问题描述】：

我正在编写井字游戏，但我用来检查用户是单击空方块还是已填充方块的代码对我不起作用。请找出我的错误。

function startgame(){
    var $board=$('#board');
    $('div.square').remove();

    for(var i=0;i<9;i++)
        $board.append($('<div/>').addClass('square').addClass('empty'));

    $('div.square.empty').click(function(){
        $this=$(this);

        if($('div.square.empty').length==0){

            displayendmsg();
        }
        else {
            $this.removeClass('empty');

            if(currentplayer=="X")
                $this.append($('<div><img src="cross.jpg">        </div>').addClass('cross').css('visibility','visible'));
            else
                $this.append($('<div><img src="circle.jpg">  </div>').addClass('circle').css('visibility','visible'));

            flipturn();
        }


    });
};

即使点击一个已经被占用的方块，我也会进入处理程序，但我不知道为什么。

【问题讨论】：

仅供参考，您真的应该使用var $this = $(this); - 如果没有var 关键字，您创建的全局几乎总是不是您想要的，有时（通常是循环变量发生时）一个很好的方法引入难以发现的错误。
由于这可能是一个学习项目，我建议您尝试在不更改类或让 jQuery 为您做出任何“决定”的情况下这样做。理想情况下，您有一个独立于视觉表示和界面的游戏引擎，您告诉游戏引擎的只是某个图块已被点击，然后它应该自行决定这是否是合法行为。现在看来这似乎不是一个很大的优势，但对于更复杂的事情，你最终会以现在的方式编写无法维护的代码。
not able to check if a square is empty tictactoe game jquery的可能重复

标签： javascript jquery

【解决方案1】：

.click() 在调用时将事件处理程序附加到与选择器匹配的所有元素。即使元素稍后与选择器不匹配，事件处理程序仍然存在。

改为使用.on() 检查选择器在触发时是否仍适用于您的事件处理程序：

$(document).on("click", "div.square.empty", function(){ alert("Clicked an empty square!"); });

【讨论】：

请..read the docs！ .on('click', func) 在您使用它的方式上与.click(func) 或.bind('click', func)完全相同
哎呀，借口莫伊。首先使用.live()，但后来我发现它已被弃用，因此我更新为.on()，但语法不太正确。现在根据文档修复它。谢谢。
不需要文档范围的委托。处理程序在创建正方形后绑定，因此$('div.square').on('click', '.empty', ...); 完成了这项工作。
@ThiefMaster 随意编辑（或建议编辑）以改进答案。

【解决方案2】：

您的问题是您在调用.click(..) 函数时仅为与选择器匹配的元素绑定事件处理程序。但是，您希望将它绑定到所有元素上，但仅当元素具有正确的类时才触发该函数。

您可以通过使用委托来做到这一点。在最近的 jQuery 版本中，您可以使用 .on() 方法：

$('div.square').on('click', '.empty', function() {
    // your code here
});

【讨论】：