2

Estoy trabajando en la creación de un proyecto en ASP.NET.

Estoy implementando el uso de jQuery para generar unas filas de una tabla la cual se cargan con los datos obtenidos de la consulta, la primera parte si me lo hace me llena la tabla con los registros el problema que tengo es cuando trato de obtener los datos de la fila de la tabla ya que cada registro tiene su botón para actualizar, obtener información etc.

Pero al hacer click en el botón no me responde la función que tengo en en el script, me percate que si ingreso fijo el registro si me funciona el boton al hacer click , pero cuando los inserto por medio de jquery no me funciona , me podrían ayudar en como solucionar este problema, anexo ejemplo para mayor comprensión.

$("#TEST0").click(function () {
            alert("TEXTO INSERTADO DESDE LA JS");
        });
        $("#TEST").click(function () {
            alert("TEXTO INSERTADO DIRECTAMENTE EN EL HTML");
        });

$("#enviar").click(function () {
var l_USER=1;

for (var y = 0; y < l_USER; y++) {

$("#t_body").append("\n" +"<tr>" + "\n" +
                    "<td>" +"TEST "+ y + "</td>" +"\n"+
                    "<td>" +"TEST "+ y + "</td>" + "\n" +
                    "<td>" +"TEST "+ y + "</td>" + "\n" +
                    "<td>" +"TEST "+ y + "</td>" + "\n" +
                    "<td>" +"TEST "+ y + "</td>" + "\n" +
                    "<td>" +"TEST "+ y + "</td>" + "\n" +
                    "<td>" +"TEST "+ y + "</td>" + "\n" +
                    "<td>" + "<button type=\"button\" id=\"" +"TEST"+ y + "\">Actualizar</button>"+ "</td>" + "\n"
                    + "</tr>");
}
        });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="DIV_CONTENEDOR_TABLA">
<table id="tbl" class="table table-striped table-bordered" style="width: 100"><thead>
<tr>
<th>USUARIO</th>
<th>NOMBRE</th>
<th>APELLIDO</th>
<th>CORREO ELECTRONICO</th>
<th>PERFIL</th>
<th>ACTIVO</th>
<th>TIPO USUARIO</th>
<th>AJUSTES</th>
</tr>
</thead>
<tbody id="t_body">
<tr>
<td>TEST</td>
<td>TEST</td>
<td>TEST</td>
<td>TEST</td>
<td>TEST</td>
<td>TEST</td>
<td>TEST</td>
<td><button type="button" id="TEST">Actualizar</button></td>
</tr>
</tbody>
</table>
<button type="button" id="enviar">Generar Filas</button>
</div>

2 respuestas 2

3

$("#TEST").click(function() {
  alert("TEXTO INSERTADO DIRECTAMENTE EN EL HTML");
});
$(document).on('click', '.btnDynamic', function(){
    alert("TEXTO INSERTADO CON ELEMENTOS DINAMICOS");
});

$("#enviar").click(function() {
  var l_USER = 1;
  for (var y = 0; y < l_USER; y++) {
    let idDynamic = new Date().getTime()
    $("#t_body").append("\n" + "<tr>" + "\n" +
      "<td>" + "TEST " + y + "</td>" + "\n" +
      "<td>" + "TEST " + y + "</td>" + "\n" +
      "<td>" + "TEST " + y + "</td>" + "\n" +
      "<td>" + "TEST " + y + "</td>" + "\n" +
      "<td>" + "TEST " + y + "</td>" + "\n" +
      "<td>" + "TEST " + y + "</td>" + "\n" +
      "<td>" + "TEST " + y + "</td>" + "\n" +
      "<td>" + "<button class=\"btnDynamic\" type=\"button\" id=\"" + idDynamic + y + "\">Actualizar</button>" + "</td>" + "\n" +
      "</tr>");
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="DIV_CONTENEDOR_TABLA">
  <table id="tbl" class="table table-striped table-bordered" style="width: 100">
    <thead>
      <tr>
        <th>USUARIO</th>
        <th>NOMBRE</th>
        <th>APELLIDO</th>
        <th>CORREO ELECTRONICO</th>
        <th>PERFIL</th>
        <th>ACTIVO</th>
        <th>TIPO USUARIO</th>
        <th>AJUSTES</th>
      </tr>
    </thead>
    <tbody id="t_body">
      <tr>
        <td>TEST</td>
        <td>TEST</td>
        <td>TEST</td>
        <td>TEST</td>
        <td>TEST</td>
        <td>TEST</td>
        <td>TEST</td>
        <td><button type="button" id="TEST">Actualizar</button></td>
      </tr>
    </tbody>
  </table>
  <button type="button" id="enviar">Generar Filas</button>
</div>
Tu código no funcionaba por que al tratar de vincular el evento al elemento dinámico, este todavía no existía en el DOM. $(document).on('click', '.btnDynamic', function(){ alert("TEXTO INSERTADO CON ELEMENTOS DINÁMICOS"); }); con esto le dices a jquery que este pendiente de dichos elementos que se puedan crear dinamicamente y que dispare el evento. Por otro lado crear id repetidos es una mala practica, trata tener id únicos.

2

Te recomiendo que uses clases en lugar de ids. Tambien te recomiendo usar on() en lugar de click() asi:

$("#TEST").click(function () {
            alert("TEXTO INSERTADO DIRECTAMENTE EN EL HTML");
        });
        $("#tbl").on("click", ".TEST", function () {
            alert("TEXTO INSERTADO DESDE LA JS");
            
        });

$("#enviar").click(function () {
var l_USER=1;

for (var y = 0; y < l_USER; y++) {

$("#t_body").append("\n" +"<tr>" + "\n" +
                    "<td>" +"TEST "+ y + "</td>" +"\n"+
                    "<td>" +"TEST "+ y + "</td>" + "\n" +
                    "<td>" +"TEST "+ y + "</td>" + "\n" +
                    "<td>" +"TEST "+ y + "</td>" + "\n" +
                    "<td>" +"TEST "+ y + "</td>" + "\n" +
                    "<td>" +"TEST "+ y + "</td>" + "\n" +
                    "<td>" +"TEST "+ y + "</td>" + "\n" +
                    "<td>" + "<button type=\"button\" class=\"" +"TEST" + "\">Actualizar</button>"+ "</td>" + "\n"
                    + "</tr>");
}
        });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="DIV_CONTENEDOR_TABLA">
<table id="tbl" class="table table-striped table-bordered" style="width: 100"><thead>
<tr>
<th>USUARIO</th>
<th>NOMBRE</th>
<th>APELLIDO</th>
<th>CORREO ELECTRONICO</th>
<th>PERFIL</th>
<th>ACTIVO</th>
<th>TIPO USUARIO</th>
<th>AJUSTES</th>
</tr>
</thead>
<tbody id="t_body">
<tr>
<td>TEST</td>
<td>TEST</td>
<td>TEST</td>
<td>TEST</td>
<td>TEST</td>
<td>TEST</td>
<td>TEST</td>
<td><button type="button" id="TEST">Actualizar</button></td>
</tr>
</tbody>
</table>
<button type="button" id="enviar">Generar Filas</button>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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