JQuery clic() no funciona en html reemplazado

Question

Todavía soy nuevo en Jquery tan desnudo conmigo.

Estoy tratando de crear un juego go-moku utilizando bases de datos jquery, php y mysql. Tengo una función ajax que actualiza una placa cada segundo si es necesario.

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

}, 1000); 

Esto funciona muy bien, se comprueba la base de datos para ver si a su vez se ha incrementado y sustituye a la junta si tiene. Ahora lo que quiero hacer al final es crear una función de clic que use Ajax para actualizar la placa y activar el conteo en la base de datos. Tengo la esperanza de usar el selector N'th de alguna manera, determino en qué casilla estoy haciendo clic.

Tengo varias preguntas.

1) Mi función de clic en este momento es

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

a partir de ahora funciona en una tabla de prueba adicional que escribí en el HTML, pero no en la tabla creada con la función anterior. ¿Qué estoy haciendo mal?

2) Los tutoriales que he examinado hasta el momento indican que debo escribir el código de la siguiente manera.

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

Cuando hice una pregunta anoche, me dijeron que estaba complicando las cosas con mis funciones. Entonces, ¿cuándo debería usar una función document.ready y cuándo no? ¿Y está bien poner todos mis scripts en una función document.ready o debería tener multiple?

3) Una vez que tengo la imagen para hacer funcionar Tengo la esperanza de enviar un coordenadas X, Y al servidor y cambiar ese punto correspondiente de la tarjeta. ¿Cómo puedo determinar en qué celda de la tabla se hace clic para saber qué coordenadas usar? (¿o hay una manera mucho más fácil?)

Gracias de antemano por toda su ayuda.

Answer 1

suena como tiene que cambiar

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

a

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

Editar: Para jQuery 1.9 y posteriores que puede hacer:

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

Answer 2

La función $(document).ready() sólo se activa cuando la página se carga por primera - con el fin de hacer este trabajo intentar algo como esto:

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

$(document).ready(bindClicks); 

Esto le permitirá llamar bindClicks() más adelante si es necesario, al obligar a los eventos de clic de una nueva mesa

Answer 3

1) ¿Estás estés -cableando el evento click luego de cargar el contenido ajax?

La función $(document).ready se activará tan pronto como la página esté completamente cargada, pero no se activará después de las llamadas ajax.Por lo tanto, tendrá que volver a conectar el evento clic después de cada llamada ajax:

2) KISS. Mantenlo lo más simple posible. Si tiene más de 50 líneas dentro de una declaración document.ready, es posible que desee crear algunas funciones.

3) La mejor manera de lograr esto podría ser asignar un ID específico a cada celda y capturarlo en el evento click. Luego puede pasar eso al servidor y actualizar la celda específica en la declaración.

Answer 4

¿Seguro jQuery está emparejando su búsqueda:

$ ("td> img")

Me cargar Firefox con Firebug y comprobar que su partido de primera realmente conseguir. La segunda tabla de su creación puede tener una estructura ligeramente diferente a la esperada y Firebug puede mostrarle también la estructura exacta.

Goodluck.