0

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

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


    });
};

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

4

2 回答 2

1

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

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

$(document).on("click", "div.square.empty", function(){ alert("Clicked an empty square!"); });
于 2012-12-22T09:28:55.917 回答
0

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

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

$('div.square').on('click', '.empty', function() {
    // your code here
});
于 2012-12-22T11:37:16.120 回答