Bolt_Head Bolt_Head - 5 months ago 10x
Javascript Question

JQuery click() not working on replaced html

I'm still new to Jquery so bare with me.

I am trying to create a go-moku game using jquery,php, and mysql database.
I have a ajax function that updates the a board every second if needed.

var turnCount = -1;
$.get('includes/boardControl.php',{turn: turnCount }, function(data){
if(data != "")
{ $("#board").html(data);
turnCount = $("#turnCount").text();

}, 1000);

This works just fine, it checks the database to see if turn has been incremented and replaces the board if it has. Now what I want to ultimately do is create a click function that use Ajax to update the board and turn count in the database. I am hoping to somehow use the N'th selector do determine what square I'm clicking on.

I have several questions.

1) My click function right now is

$(document).ready(function() {
$("td > img").click(function(){

as of right now it works on a extra test table I wrote into the html, but not on the table created with the previous function. What am I doing wrong?

2) The tutorials I've looked at so far dictate that I should write code in the following way.

$(document).ready(function() {
//code here

When i asked a question last night, I was told that I was over complicating things with my functions. So when should i use a document.ready function and when not? And is it fine to put all of my scripts into one document.ready function or should I have multiple?

Once I get the click image to work I am hoping to send a X,Y coordinate to the server and change that corresponding spot on the board. How would I determine what cell in the table is clicked in order to know what coordinates to use? (or is there a much easier way?)

Thanks in advance for all your help.


sounds like you need to change

$("td > img").click(function(){


$("td > img").live('click',function(){

Edit: For jQuery 1.9 and later you can do:

$("#board").on('click', 'td > img', function(){
  // handle click