无法使用jQuery检查井字棋是否为空

Not able to check if Tic-tac-toe a square is empty using jQuery

本文关键字：是否 检查井 jQuery      更新时间：2023-09-26

我正在编写一款井字游戏，但是我用来检查用户点击的是空方块还是已经填满的方块的代码不适合我。请找出我的错误。

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

    });
};

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

.click()在调用时为所有匹配选择器的元素附加一个事件处理程序。即使元素之后不匹配选择器，事件处理程序仍然会在那里。

相反，使用.on()来检查选择器是否仍然适用于触发事件处理程序的时刻:

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

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

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

$('div.square').on('click', '.empty', function() {
    // your code here
});
相关文章：