3

Tengo una tabla que contiene elementos con ID pero cuando añado de forma dinámica una fila, esos nuevos elementos no son reconocidos por el árbol DOM.

Cuando cargo la pagina tengo esta estructura en la tabla:

<table id="tabla">
  <tbody>
    <tr>
      <td><span id="v_1">Elemento 1</span></td>
      <td><span id="e_1" class="glyphicon glyphicon-pencil"></span></td>
    </tr>
  <tbody>
</tabla>

Desde JQuery agrego una nueva fila con:

$('#tabla tbody').append('<tr><td><span id="v_2">Elemento 2</span></td><td><span id="e_2" class="glyphicon glyphicon-pencil"></span></td></tr>');

... e inspecciono la página, y todo bien, me aparece así

<table id="tabla">
  <tbody>
    <tr>
      <td><span id="v_1">Elemento 1</span></td>
      <td><span id="e_1" class="glyphicon glyphicon-pencil"></span></td>
    </tr>
    <tr>
      <td><span id="v_2">Elemento 2</span></td>
      <td><span id="e_2" class="glyphicon glyphicon-pencil"></span></td>
    </tr>
  <tbody>
</tabla>

Pero los ID v_2 y e_2 son inaccesibles porque no están en el árbol DOM. ¿Cómo puedo solucionar esto?

3
  • 1
    ¿Qué quieres hacer con dichos elementos?
    – Shaz
    el 9 nov. 2016 a las 17:50
  • Cuál es tu método para acceder a esos id?
    – JuankGlezz
    el 9 nov. 2016 a las 17:51
  • No tiene sentido "regenerar el arbol DOM". Si el append anduvo, entonces lo que hizo fue precisamente actualizar el DOM. Tu error tiene que estar en otro lado.
    – leonbloy
    el 4 jun. 2017 a las 3:22

2 respuestas 2

1

No sé si será porque tienes la etiqueta </tabla> en vez de </table> pero a mí si que me deja acceder a esos ID. Como puedes comprobar en el ejemplo saco el texto que hay en el ID v_2.

Ejemplo:

$( document ).ready(function() {
    $('#tabla tbody').append('<tr><td><span id="v_2">Elemento 2</span></td><td><span id="e_2" class="glyphicon glyphicon-pencil"></span></td></tr>');
    
    console.log($("#v_2").text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tabla">
  <tbody>
    <tr>
      <td><span id="v_1">Elemento 1</span></td>
      <td><span id="e_1" class="glyphicon glyphicon-pencil"></span></td>
    </tr>
  <tbody>

0

Para delegar eventos a elementos del DOM que fueron creados de manera dinámica, yo utilizaría la función on() de la siguiente forma:

$('tbody').on('click', 'span',function(){
  console.log("hice click en " + this.id);
})
  1. Selecciono el padre que desde un inicio existió al iniciar la pagina $('tbody')
  2. en el método on() le paso los parámetros {click, focus, mouseenter, ...}, {selector donde se hará la función},{función a realizar}

El selector tiene que ser una clase que todos los elementos contenga igual en este caso la <span>

Así todos los elementos generados tengan esa función que desees

Referencia

Ejemplo funcionando:

$('button').click(function(){
  $('#tabla tbody').append('<tr><td><span id="v_2">Elemento 2</span></td><td><span id="e_2" class="glyphicon glyphicon-pencil"></span></td></tr>');
})

$('tbody').on('click', 'span',function(){
  console.log("hice click en " + this.id);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tabla">
  <tbody>
    <tr>
      <td><span id="v_1">Elemento 1</span></td>
      <td><span id="e_1" class="glyphicon glyphicon-pencil"></span></td>
    </tr>
  <tbody>
</table>
<!-- suponiendo que agregas la columna por X función o alguna acción-->
<button>hola</button>

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.