jQuery empty() method makes my <element> un-clickable?

Question

I'm trying to create a tic-tac-toe game using HTML/CSS/Javascript/jquery. I have a reset button that clears the contents of the grid. After pressing the reset button, the grid's contents gets cleared but I cannot click on my grid to pick my spot again. My reset button has the following code:

 $('#reset').click(function(){
   $('.cells').empty();
     //board_make();
 });

My grid/board was created using the code below. Basically it creates elements for each cell in the grid with each having a class of "cells".

function board_make(){
  for (var i = 0; i < 3; i ++){
    array[i] = new Array(3);
    for (var j = 0; j < 3; j ++){
      array[i][j] = "A" ;
      if(j == 2){
        $('.board').append("<div class='cells'><p class='hidden'>"+i.toString()+j.toString()+"</div></br></br></br>");
      }
      else{
      $('.board').append("<div class='cells'><p class='hidden'>"+i.toString()+j.toString()+"</div>");
      }
    }
  }
}

Finally, this is the code that gets executed whenever a cell in the grid is clicked on:

$('.cells').click(function(){
    if ($(this).text() != symbol){
      var a = parseInt($(this).text()[0],10);
      var b = parseInt($(this).text()[1],10);
      array[a][b] = symbol;
      $(this).html("<p class='shown'>"+symbol+"</p>");
    }
    else{
      alert("Spot taken. Pick another spot.");
    }
    if ((winner_found === false) && (hor_match() || ver_match() || diag_match())){
        alert("Match found!");
        winner_found = true;
    }  
 });

Here's the link to the work-in-progress along with the codes: http://jsbin.com/inazog/6/edit.

possible duplicate of Event delegation in jQuery, how to do it? — Shmiddty
– Shmiddty, Commented Dec 26, 2012 at 20:01

Shmiddty · Accepted Answer · 2012-12-26 20:15:36Z

2

The problem is that you are using hidden text to indicate the row/col of the cell, but you remove the hidden text when you empty the cells.

"<div class='cells'><p class='hidden'>"+i.toString()+j.toString()+"</div>"

var a = parseInt($(this).text()[0],10);  // $(this).text() is "" after you clear the cells.
var b = parseInt($(this).text()[1],10);

See here for a fixed version of your code: http://jsbin.com/inazog/13/edit

edited Dec 26, 2012 at 20:15

answered Dec 26, 2012 at 20:09

Shmiddty

13.9k1 gold badge38 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

dexx1220 Over a year ago

Thanks for the explanations everyone! Thanks Shmiddty for providing a fixed version. Happy holidays!

Pointy · Accepted Answer · 2012-12-26 20:07:41Z

1

edit — what's below isn't the problem. The problem appears to be that when clearing out the cells, you're clearing out the index values stashed in them. That is, you're removing the hidden <p> tags.

Instead of sticking the index in there, use the jQuery .data() mechanism:

var cell = ${'<div/>', {'class': 'cells'});
cell.data('x-index', i).data('y-index', j);
$('.board').append(cell);

Then you can get the index value of the cell without having to preserve the hidden elements.

Not the problem, but not really a bad idea:

Instead of

$('.cells').click(function(){

set up the event handler like this:

$('body').on('click', '.cells', function() { ...

When you empty out the container, all the elements are lost, and with them go the event handlers. By setting up the handler on an outer element that doesn't get nuked, the handler remains in effect after the grid is rebuilt.

If you wanted to, you could also put the event handler on the ".board" container:

$('.board').on('click', '.cells', function() { ...

edited Dec 26, 2012 at 20:07

answered Dec 26, 2012 at 19:59

Pointy

415k62 gold badges600 silver badges631 bronze badges

1 Comment

Parv Sharma Over a year ago

the event handler click is on .cells and they are not being cleared when calling $('.cells').empty()

Ry- · Accepted Answer · 2012-12-26 20:25:04Z

1

There are a lot of problems or potential problems here.

First of all, don’t bother defining your arrays’ dimensions beforehand, and use array literals instead of new Array. JavaScript mostly ignores that, and it can lead to strange bugs.
Next, use the DOM! Writing HTML over everything is just asking for event handlers to be lost.
Use data instead of parsing the nodes' text content. Or just use your array.
You’re not actually clearing the array when resetting. This could be because board_make() adds everything again; I don’t know. It would be better to actually remove the entire thing, and have board_make() make it all again. May as well add the event handlers in there, too, and keep everything nice and contained.
</br> isn’t valid HTML.

So, with that in mind, I changed some things and now it’s not really the same... :( But you get the idea, right?

answered Dec 26, 2012 at 20:25

Ry-♦

226k56 gold badges496 silver badges504 bronze badges

1 Comment

dexx1220 Over a year ago

Thanks for the link. I'm still fairly new to programming so some parts of the createBoard() function you wrote are foreign to me, but I'll definitely spend time learning it.

meadowstream · Accepted Answer · 2012-12-26 20:16:02Z

0

Change: $('.cells').click(function() to $('.board').on('click', '.cells', function() so that the click event is alive on re-rendering.
Change $('.cells').empty(); to $('.board').empty(); and re-render the board:

board_make();

JSBin

answered Dec 26, 2012 at 20:16

meadowstream

4,1592 gold badges22 silver badges24 bronze badges

Collectives™ on Stack Overflow

jQuery empty() method makes my <element> un-clickable?

4 Answers 4

1 Comment

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related