Can't Use :not() Selector

Question

I am trying to make a Tic-Tac-Toe game and I am currently working on the aspect of selecting the boxes themselves, but while using JQuery the :not selector doesn't seem to be working.

 function main(){ //Functions $('.cell:not(.block)').click(function(){ $(this).addClass(color); $(this).addClass('block'); if(color=='g'){color='r';}else{color='g';} }); //Variables var color = 'g'; } $().ready(main); 

 html { background-color:black; color:white; text-align:center; } .cell { border: 1px solid white; margin:1px; width:30%;height:30%; } .g {background-color:lime;} .r {background-color:red;} #board {height:500px;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <header>Tic Tac Toe</header> <div id='board'> <div class='cell'></div> <div class='cell'></div> <div class='cell'></div> </div> 

Answer 1

That isn't how jQuery selects elements.

When you run $('selector') , the selector is evaluated immediately , against the current state of the DOM. Your three elements are found because none of them have .block , and click handlers are bound to all three elements.

There are several ways of fixing this:

• If you want the selector to be dynamically evaluated, you need to use on to delegate the event to one of the containing elements. The event on the specific child element will bubble up to the containing element's handler and be tested each time against the selector. This is the most expensive option, and probably the least desirable; you shouldn't be relying on jQuery selectors for this kind of logic:

   $('.board').on('click', '.cell:not(.block)', function () { // ... }); 

• Alternatively, the simplest and cheapest option is to simply check for .block in the click handler:

   $('.cell').click(function () { if ($(this).hasClass('block')) return; //... 

• Finally, you can unbind the click handler at the same time you add the .block class

   $('.cell').click(function () { $(this).unbind( "click" ); // ... 

Answer 2

Since you are changing the class after already have made the selection it would count as a dynamic selector and you need to use .on() for that.

 function main() { //Functions $('#board').on('click', '.cell:not(.block)', function() { $(this).addClass(color).addClass('block'); color = color == 'g' ? 'r' : 'g'; }); //Variables var color = 'g'; } $().ready(main); 

 html { background-color: black; color: white; text-align: center; } .cell { border: 1px solid white; margin: 1px; width: 30%; height: 30%; } .g { background-color: lime; } .r { background-color: red; } #board { height: 500px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <header>Tic Tac Toe</header> <div id='board'> <div class='cell'></div> <div class='cell'></div> <div class='cell'></div> </div>