La función jQuery .click no funciona < td > ¿etiqueta?

3 minutos de lectura

avatar de usuario
SilentDev

Entonces, estoy creando una tabla usando Javascript y jQuery, y quiero que cuando haga clic en los td en la primera fila de la tabla, el resto de los td en esa columna se despliegue. Déjame tratar de explicarlo mostrando mi código. Aquí está mi Javascript:

function createTr (heights) { //heights is just an array of words
    for (var h=0; h<heights.length; h++) { 
        var theTr = $("<tr>", { id: "rowNumber" + h});
        for (var i=0; i<heights.length-3; i++) { 
            theTr.append($("<td>", { "class": "row"+h + " column"+i,
                                     html: heights[h][i]
                                   }));
        }
        $('#newTable').append(theTr); // append <tr id='rowNumber0'> to the table (#newTable), which is written in the html
    }
}

Esto básicamente crea td’s y cada td es similar a este formato

<td class="rowh columni">

Lo quiero para que todos los td estén ocultos excepto los td en .row0 y si hace clic en el td en .row0 .columni, aparecerán todos los td en .columni. El parámetro ‘alturas’ es solo una matriz, por ejemplo, puede ser

var heights = [['headerOne', 'headerTwo'], ['someTd', 'anotherTd'],];

y crearía una tabla usando esas palabras, headerOne y headerTwo estarían en la primera fila, someTd y anotherTd estarían en la segunda fila.

Ahora, cuando trato de agregar una función de clic como esa

function animation() {
    $('td').click( function() {
        alert('clicked');
    });
}

y luego llamarlo en mi función document.ready así

$(document).ready( function() {

    createTr(heights);
    animation();
});

no hace nada cuando hago clic en un td. ¿Cómo?

avatar de usuario
iglesia

http://api.jquery.com/on/

Dado que está creando los elementos después de que se haya creado el DOM. Utilice el selector “on” para obtener el elemento preciso que se crea dinámicamente.

Desde la URL:

   $("#newTable").on("click", "td", function() {
     alert($( this ).text());
   });

  • hm, ¿qué quieres decir con #newTabletbody? Probé $(“#newTable”).on y no funcionó.

    – SilentDev

    28/10/2013 a las 17:34

  • Lo siento, fue un error tipográfico. Puede probar $(‘body’).on(‘click si eso no parece funcionar.

    –Churchill

    28/10/2013 a las 17:36

  • hm $(‘body’).on(‘click’ tampoco funciona. Estoy poniendo todo el código en la función llamada animation, así — function animation() { $(‘body’).on( ‘click’, ‘td’, function() { alert(‘clicked’); }); } — pero todavía no parece funcionar.

    – SilentDev

    28/10/2013 a las 17:38


  • está bien, solo funciona si lo coloco antes del $(documento).listo(función

    – SilentDev

    28/10/2013 a las 18:06

avatar de usuario
Ankit Tyagi

Prueba así:

$('body').on('click','td', function() {
        alert('clicked');
    });

  • si elimina el ‘(‘ adicional después de ‘td’, entonces solo funciona si lo coloco antes de la función $(document).ready(.

    – SilentDev

    28/10/2013 a las 18:07

prueba esto

function animation() {
    $(document).on('click','td',function() {
    alert('clicked');
    });
}

  • ¿Se supone que debe haber ese corchete adicional después de ‘td’, (? Porque el otro usuario que publicó una respuesta hizo lo mismo y tampoco cerró ese corchete que aparece después de ‘td’ justo antes de la función.

    – SilentDev

    28/10/2013 a las 18:03

  • Lo siento, fue un error tipográfico

    -Anto Subash

    28/10/2013 a las 18:05

  • Pero está bien, esto funciona y la otra respuesta ($(‘cuerpo’).on) también funciona solo si la coloco antes de $(documento).ready(función… gracias.

    – SilentDev

    28/10/2013 a las 18:06


Me gusta esto.-

 $("#table tr").click(function(){
    console.log(this);
});

avatar de usuario
usuario2912275

Este código funciona bien:

$(document).ready(function(){
    $("td").click(function(){
        if(this.title!=""){
            alert(this.title);
        }
    });
});

avatar de usuario
zamoldar

use esto para capturar eventos de clic para spesifc tr y td;

$('#table_id').on('click', 'tr.statusP td:first-child', function () {
                    alert('clicked');
                });

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad