Issue with jquery .click function not triggering after CSS adjustment

Question

Issue with jquery .click function not triggering after CSS adjustment

In the process of creating a fun game where two players take turns drawing on a grid by clicking <td> elements. Currently, I have implemented the functionality to toggle the background color of a <td> element from black to white and vice versa with consecutive clicks. However, I'm facing an issue where after the first click, the third click doesn't trigger as expected.

$("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);
});

The data reading function is working flawlessly

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 have included an HTML table for the game's grid structure, generated dynamically through PHP. It's currently set as a 5x5 grid for simplicity.

<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>

Would greatly appreciate any assistance provided. Thank you

javascript jquery css ajax

Answer 1

Answer №1

If you're looking for guidance, I suggest the following approach:

Cascading Style Sheets (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);
});

When dealing with AJAX requests:

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

Consider this alternative option suggested by @KevinB:

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

Update

To see a working example in HTML code, visit: https://jsfiddle.net/Twisty/7tnpm90j/

Answer 2

If you're looking for guidance, I suggest the following approach:

Cascading Style Sheets (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);
});

When dealing with AJAX requests:

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

Consider this alternative option suggested by @KevinB:

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

Update

To see a working example in HTML code, visit: https://jsfiddle.net/Twisty/7tnpm90j/

Issue with jquery .click function not triggering after CSS adjustment

Answer №1

Similar questions

Minimizing code with JQuery

Steps to activate overflow on `react-bootstrap` NavDropdown

A tutorial on utilizing a bundle in webpack based on certain conditions

Troubleshooting: JQuery - Applying CSS to dynamically generated elements

What is the best way to reorganize an object's properties?

Looking to execute a wp_query in a different PHP file for handling an AJAX request

What's the best way to transform createHmac function from Node.js to C#?

Coding in PHP, JavaScript, and HTML allows builders

Upon the initial data retrieval, everything seems to be working fine. However, when the user transitions to chatting with another user, the state value does not reset and instead shows a combination

Loading parts of a web page dynamically with ajax or jquery techniques

What is the reason behind this occurrence with just one 's'?

What is the most efficient method for adding each unique unordered list element with a specific class to the nearest parent article tag

Trouble displaying JSON data with AngularJS $http service

stacking order of floated and positioned elements

The command "Npm Start Causes sleep is not accepted" just popped up

What causes certain divs to protrude when the parent div has overflow:hidden property enabled?

The custom validator in Material2 Datepicker successfully returns a date object instead of a string

Locate the element within the specified parameters using [protractor]

Generating an order prior to payment being made by the customer

Can you navigate between slides with JQuery?