Dificultad para cambiar el fondo de la celda de la tabla generada dinámicamente onclick

Estoy trabajando en hacer un pintor de pixel art, y esto es más que confuso.

A partir de ahora, tengo una tabla que se genera dinámicamente en función de las cantidades especificadas por el usuario para “Filas” y “Columnas”. Esto funciona perfectamente bien (aunque parece que no funciona en JSFiddle, pero puedo asegurarle que de hecho funciona en una página web como puede ver aquí en mi sitio de prueba).

Lo que estoy tratando de lograr ahora se puede ver en este violín. Bastante sencillo, tratando de cambiar el clics de la etiqueta “TD”.

Parece que no puedo lograr que esa funcionalidad funcione con una tabla generada dinámicamente.

Esto es lo que estoy intentando actualmente ( JSFiddle )

HTML:

Row Count: Column Count:  

CSS:

 table{ width:500px; height:500px; } td{ padding:10px; margin:10px; border:1px solid #ccc; } .active { background-color:#aaa; } 

JS / jQuery:

 function createTable() { mytable = $('
').attr({ id: "basicTable" }); var rows = new Number($("#rowcount").val()); var cols = new Number($("#columncount").val()); var tr = []; for (var i = 0; i < rows; i++) { var row = $('').attr({ class: ["class1", "class2", "class3"].join(' ') }).appendTo(mytable); for (var j = 0; j < cols; j++) { $('').text("text1").appendTo(row); } } console.log("TTTTT:" + mytable.html()); mytable.appendTo("#box"); } $(function () { $('td').click(function () { $(this).toggleClass('active'); }); });

Alguna ayuda o sugerencia será muy apreciada.

Sí, no funcionará. Como toda la table se crea dinámicamente , no se adjuntan al document (es decir, el problema con los elementos creados dinámicamente es que no nacen con los mismos controladores de eventos que los elementos existentes ).

Entonces debe ir a la delegación de eventos adjunta al documento.

 $(function () { $(document).on('click', 'td', function () { $(this).toggleClass('active'); }); }); 

JSFiddle

Espero que lo hayas entendido.

Eres vinculante, haz clic en ‘td’ antes de crear ‘td’. Haga clic dentro del método createTable () después de que se hayan agregado ‘td al DOM.

 function createTable() { // your code $('td').click(function () { $(this).toggleClass('active'); }); } 

Agregar el enlace jsfiddle. http://jsfiddle.net/y94K8/4/