CODEWITHSUNDEEP
javascriptjqueryajax
Bolt_Head
Bolt_Head

Reputation: 1463

jQuery click() not working on replaced html

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

Upvotes: 6

Views: 2475

Answers (4)

Funky Dude
Funky Dude

Reputation: 3967

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
});

Upvotes: 18

StarSignLeo
StarSignLeo

Reputation: 266

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.

Upvotes: 1

Chris Van Opstal
Chris Van Opstal

Reputation: 37547

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.

Upvotes: 1

Andrew Hare
Andrew Hare

Reputation: 351526

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.

Upvotes: 4

Related Questions