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;
setInterval(function(){
    $.get('includes/boardControl.php',{turn: turnCount }, function(data){
        if(data != "")
        {   $("#board").html(data);
            turnCount = $("#turnCount").text();
            $("#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(){
        alert("clicked");
    });
});

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?

3) 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?)

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;
setInterval(function(){
    $.get('includes/boardControl.php',{turn: turnCount }, function(data){
        if(data != "")
        {   $("#board").html(data);
            turnCount = $("#turnCount").text();
            $("#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(){
        alert("clicked");
    });
});

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?

3) 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?)

• javascript
• jquery
• ajax

4 Answers 4

sounds like you need to change

$("td > img").click(function(){
                alert("clicked");
        });

to

$("td > img").live('click',function(){
                alert("clicked");
        });

Edit: For jQuery 1.9 and later you can do:

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

The $(document).ready() function only fires when the page first loads - in order to make this work try something like this:

function bindClicks() {
    $("td > img").click(function(){
        alert("clicked");
    });
}

$(document).ready(bindClicks);

This will allow you to call bindClicks() later on if need be to bind the click events of a new table.

1) Are you re-wiring the click event after the ajax content loads?

The $(document).ready function will fire as soon as the page is fully loaded, but won't fire after ajax calls. So you will need to re-wire the click event after every ajax call:

2) KISS. Keep it as simple as possible. If you have 50+ lines inside a document.ready statement you might want to create some functions.

3) The best way to accomplish this might be to assign a specific ID to each cell and capture that in the click event. You can then pass that to the server and update the specific cell on the return.

Are you sure JQuery is matching you query:

$("td > img")

I would load firefox with firebug and check that your actually getting match first. The second table your creating may have a slightly different structure then you expected and firebug can show you the exact structure also.

Goodluck.