Jump to content

Why doesn't this work.


studsm
 Share

Recommended Posts

Can anyone tell me what is wrong with this code that it doesn't work? the table generates fine but the background color doesn't change when I click on the td cells

 

<!DOCTYPE html>
<html>
<head>
<style>
table, td, tr{margin: 0 auto; border: 1px solid black; border-collapse: collapse; background-color: #f1f1c1; padding: 5px;}
table{width: 40%; table-layout: fixed;}
td{height: 30px;}
</style>
<script>
$(document).ready(function(){
$("td").on("click", function(){
$(this).css('background-color', 'red');
});
});
function generateGrid1(row, col)
{
var text = '<table>';
for (var j = 0; j < row; j++)
{
text += '<tr>';
for (var i = 0; i < col; i++)
{
text += '<td></td>';
}
text += '</tr>'
}
text += '</table>'
document.getElementById('player1').innerHTML = text;
}
</script>
</head>
<body onload='generateGrid1(10,10);'>
<div id ='player1'></div>
</body>
</html>
Link to comment
Share on other sites

You have to select a parent element that exists on page before created elementsTry

$(document).ready(function(){            $("#player1 table td, #player2 table td").on("click", function(){        $(this).css('background-color', 'red');    });});
And try <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> insteadUsing ref to https from http will throw encyption error. Using // it works in Both
Link to comment
Share on other sites

Thanks for the reply dsonesuk, I didn't know that you needed to include a parent element that already existed that will help a lot in the future. However it still doesn't seem to be working i'll post what I have now and maybe someone can figure out why. I'm at a total loss here and i'm at a point of just guessing things and nothing seems to be working.

<!DOCTYPE html><html><head><style>table, td, tr{margin: 0 auto; border: 1px solid black; border-collapse: collapse;  padding: 5px;}td {background-color: #f1f1c1;}table{width: 40%; table-layout: fixed;}td{height: 30px;}</style><script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script><script>$(document).ready(function(){    $("#player1 table td").on('click', function(){       $(this).css('background-color', 'blue');    });});function generateGrid1(row, col){ var text = '<table>'; var cell = 0; for (var j = 0; j < row; j++) {  text += '<tr>';  for (var i = 0; i < col; i++)  {   text += '<td id = "pumped' + cell + '";></td>';   cell++;  }  text += '</tr>'; } text += '</table>'; document.getElementById('player1').innerHTML = text;}</script></head><body onload='generateGrid1(10,10);'><div id ='player1'></div></body></html>
Link to comment
Share on other sites

It's the same issue, this page describes the problem and the solution:https://learn.jquery.com/events/event-delegation/You actually need this:

$("#player1").on('click', 'table td', function(){
That means that the event itself is registered on the #player1 element, which exists when that code runs, but instead of the handler firing on that element it instead gets delegated to fire on any "table td" element that is a child of #player1.
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...