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

How can I extract the text within an element based on the position of the

Preventing default action in jQuery to avoid interference with serialization and following AJAX request

Enhancing TypeScript builtin objects in Netbeans using a custom plugin

Creating a HTML5 canvas animation of an emoticon winking to add a fun touch to your

How to automatically reset a form after submission in React using Ant Design?

Unable to apply ready function in jquery .load

Utilize JQuery to target all elements except for those within a specified excluded class

Keyframes and CSS Animation for Border Effects

Dynamically add a plugin to jQuery during execution

Building a Sleek Hover Effect Dropdown Menu Using HTML and CSS

Customize the font color in Material UI to make it uniquely yours

The bxslider is displaying blank space when set to an infinite loop

Issue with rendering JavaScript in Rails 3 caused by AJAX

Using Vue.js 3 to fetch data from a REST API using the Axios

"Webpack error: Including a comma within a string leads to a syntax problem when bund

Employing jQuery to send an ajax request by utilizing an anchor <a> tag

Choose the AuthGuard category in real-time

Enhancing link functionality with jQuery on a dynamically generated server page

Instructions on how to dynamically show specific text within a reusable component by utilizing React and JavaScript

encountering an issue while working with Selenium on Google Colab