jquery .click wont work after .css change

Question

I am making a simple game where you and a partner have to draw something by taking turns clicking <td> tags. Right now I can click a <td> and it will turn black but it is supposed to turn white on a second click. The second .click works, I know this because 0 and 1 will alert but not 2.

$("td").click(function(){
    alert(0);
    alert($(this).css('background-color')); // alerts rgb(0, 0, 0)
    if($(this).css('background-color') == 'rgb(255, 255, 255)' || 'rgba(0,0,0,0)'){
        $(this).css('background-color', 'black');
        alert(1);
        var color = 'black';
    } else{
        alert(2);
        $(this).css('background-color', 'white');
        var color = 'white';
    }
    //alert(event.target.id);
    update( event.target.id, color);
});

It is also reading everything great

function read(){
    $.post("ajax.php",
        {
            read: '1',
        },
        function(data){
            values=data.split('*');
            //alert(values[1]);
            var id = '#' + values[0]+ '';
            //alert(id);
            $( id ).css('background-color', values[1]);
        }
    );
}

I've added the HTML table but it is built with PHP and usually 25 by 25 but to make it easier I simplified it with a 5 by 5 representative

<table>
    <tr>
        <td style="height: 21px; width: 21px; background-color:white;" id="a1"></td>
        <td style="height: 21px; width: 21px; background-color:white;" id="a2"></td>
        <td style="height: 21px; width: 21px; background-color:white;" id="a3"></td>
        <td style="height: 21px; width: 21px; background-color:white;" id="a4"></td>
        <td style="height: 21px; width: 21px; background-color:white;" id="a5"></td>
    </tr>
    <tr>
        <td style="height: 21px; width: 21px; background-color:white;" id="b1"></td>
        <td style="height: 21px; width: 21px; background-color:white;" id="b2"></td>
        <td style="height: 21px; width: 21px; background-color:white;" id="b3"></td>
        <td style="height: 21px; width: 21px; background-color:white;" id="b4"></td>
        <td style="height: 21px; width: 21px; background-color:white;" id="b5"></td>
    </tr>
    <tr>
        <td style="height: 21px; width: 21px; background-color:white;" id="c1"></td>
        <td style="height: 21px; width: 21px; background-color:white;" id="c2"></td>
        <td style="height: 21px; width: 21px; background-color:white;" id="c3"></td>
        <td style="height: 21px; width: 21px; background-color:white;" id="c4"></td>
        <td style="height: 21px; width: 21px; background-color:white;" id="c5"></td>
    </tr>
    <tr>
        <td style="height: 21px; width: 21px; background-color:white;" id="d1"></td>
        <td style="height: 21px; width: 21px; background-color:white;" id="d2"></td>
        <td style="height: 21px; width: 21px; background-color:white;" id="d3"></td>
        <td style="height: 21px; width: 21px; background-color:white;" id="d4"></td>
        <td style="height: 21px; width: 21px; background-color:white;" id="d5"></td>
    </tr>
    <tr>
        <td style="height: 21px; width: 21px; background-color:white;" id="e1"></td>
        <td style="height: 21px; width: 21px; background-color:white;" id="e2"></td>
        <td style="height: 21px; width: 21px; background-color:white;" id="e3"></td>
        <td style="height: 21px; width: 21px; background-color:white;" id="e4"></td>
        <td style="height: 21px; width: 21px; background-color:white;" id="e5"></td>
    </tr>
</table>

If someone could help that would be amazing. Thank you

Could you add your HTML to the question. It would really help to see a working demo in a snippet too — Rory McCrossan, Apr 28 '17 at 15:31
`$(this).css('background-color') == 'rgb(255, 255, 255)' || 'rgba(0,0,0,0)'` is not doing what you think it is.... you can not use or like that in an if. — epascarello, Apr 28 '17 at 15:33
Agree with @epascarello and would suggest you add a class to the `` instead of changing the CSS. — Twisty, Apr 28 '17 at 15:34
http://stackoverflow.com/questions/4728144/check-variable-equality-against-a-list-of-values — epascarello, Apr 28 '17 at 15:35
Sounds like this has nothing to do with jquery click or css changes. Just your if conditional. — Kevin B, Apr 28 '17 at 15:39

Twisty · Accepted Answer · 2017-04-28T16:24:30.673

I would advise doing this:

CSS

.black {
  background-color: black;
}
.white {
  background-color: white;
}

JavaScript

$("td").click(function(event) {
  alert(0);
  alert($(this).hasClass("black") ? "Black" : "White"); // alerts rgb(0, 0, 0)
  if ($(this).hasClass("white")) {
    $(this).removeClass("white").addClass("black");
    alert(1);
    var color = 'black';
  } else {
    alert(2);
    $(this).removeClass("black").addClass("white");
    var color = 'white';
  }
  update(event.target.id, color);
});

Then in your AJAX:

function read() {
  $.post("ajax.php", {
      read: '1',
    },
    function(data) {
      values = data.split('*');
      $.each(values, function(k, v) {
        $("#" + v[0]).toggleClass("black white");
      });
    }
  );
}

As was suggested by @KevinB, this is also an options:

$("td").click(function(event) {
  $(this).toggleClass("black white");
  color = $(this).hasClass("black") ? "black" : "white";
  update(event.target.id, color);
});

Update

Working example from HTML Code: https://jsfiddle.net/Twisty/7tnpm90j/

or... heh... `$(this).toggleClass('black white')` (as the entire function body before `update(...)` — Kevin B, Apr 28 '17 at 15:40
Thank you for this, with .removeAttr was very helpful and I plan on using it with future projects — Ricky_Woessner, Apr 28 '17 at 17:59

jquery .click wont work after .css change

1 Answers1