Question

我正在编写一个Tic-tac-toe游戏，但是我用来检查用户是否点击空方块或已经填充过的广告的代码对我来说不起作用。请找我的错误。

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


    });
};

即使点击已经占用的广场，我也会进入处理程序，我不知道为什么。

Answer 1

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

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

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

Answer 2

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

您可以使用委托来完成此操作。在最近的jQuery版本中，您可以使用.on()方法执行此操作：

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

使用jQuery无法检查Tic-tac-toe是否为空

2 个答案: