Not able to check if Tic-tac-toe a square is empty using jQuery
<p>I'm coding a Tic-tac-toe game but the code which I'm using to check whether the user is clicking on an empty square or an already filled one is not working for me. Please find my mistake.</p>

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

    for(var i=0;i&lt;9;i++)
        $board.append($('&lt;div/&gt;').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($('&lt;div&gt;&lt;img src="cross.jpg"&gt;        &lt;/div&gt;').addClass('cross').css('visibility','visible'));
            else
                $this.append($('&lt;div&gt;&lt;img src="circle.jpg"&gt;  &lt;/div&gt;').addClass('circle').css('visibility','visible'));

            flipturn();
        }


    });
};
</code></pre>

<p>Even when clicking on an already occupied square I enter the handler, and I don't know why.</p>
