javascript - Can't Use :not() Selector -

I am trying to make a tick-to-play game and I currently work on the aspect of choosing myself a box I'm doing, but when using jQuery: No selector does not work.

  function main () {// work $ ('. Cell: not (.block)'). Click ((color == 'g') {color = 'r';} and {color = 'g'}; ($ (this). $ (This) .addClass (color); $ (this) .addClass ('Block');;}}); // variable var color = 'g';} $ (). Ready (main);  

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

  & lt; script src =" https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js "& gt; & lt; / script & Gt; & lt; header & gt; tick tech Toe & lt; / header & gt; div id = 'board' & gt; & lt; div class = 'cell' & gt; & lt; / div & gt; & lt; div class = ' Cell '& gt; & lt; / div & gt; & lt; div class =' ​​cell '& gt; & lt; / div & gt; & lt; / div & gt;  

< / Div>

When you $ ( 'Selector'), the evaluator of the selector is immediate , unlike the current situation, your three elements of DOM are found because none of them are .block No, and click handler bound to all three elements Are there.

There are several ways to determine this:

• If you want to dynamically evaluate the selector, then you have one of the elements To represent the event, we must use the on program on a specific child element that will bubble the handler of that element and test it against the selector every time. This is the most expensive option, and perhaps least desirable; You should not rely on jQuery selectors for such reasoning:

    $ ('board'). ('Click', '.cell: not (.block)', function () {// ...});  
   
   Alternatively, the simplest and cheapest option is to check for  .block  in just click handlers: 
   
   Click  $ ('. Cell') (function () {if ($ (this) .hasClass ('block')) Return; // ...  
   
   
   
   Finally, you can open the click handler when adding  .block  class 
   
    $ ('. Cell')). Click (function () {$ (this). Unbund ("click"); // ...