1

Saludos, estoy realizando este append.

$(this).closest('tr').css("background","cyan").after("<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td><button class='tiempo_plan_boton_menos'>+</button><button>-</button></td>");

La cuestion es que el atributo que estoy añadiendo al boton pareciera no estar activo, ya que al momento de pulsar en el boton, no sucedad nada. Porque se debe este comportamiento?

Este es el evento click

$(".tiempo_plan_boton_mas").click(function()
{
    $(this).closest('tr').css("background","cyan").after("<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td><button class='tiempo_plan_boton_mas'>+</button><button>-</button></td>");
})

La tabla

    <table id="table1" class="table table-sm table-bordered table-hover">
    <thead class="thead-light">
    <tr>
    <th rowspan="2">Etapa</th>
    <th rowspan="2">Actividad</th>
    <th>Tiempo</th>
    <th colspan="2">Tiempo Parcial Acumulado</th>
    <th>Tiempo Total Acumulado</th>
    <th>Acciones</th>
    </tr>
    <tr>
    <td>Hora</td>
    <td>Hora</td>
    <td>Dias</td>
    <td>Dias</td>                                           
</tr>                                           
    </thead>
    <tbody>
    <tr>
    <td ></td>
    <td ></td>
    <td ></td>
    <td ></td>
    <td ></td>
    <td ></td>
    <td >
    <button class='tiempo_plan_boton_mas btn btn-success btn-sm'>+</button>
    <button class='tiempo_plan_boton_menos btn btn-danger btn-sm'>-</button>
    </td>
    </tr>
    <tr>
    <td ></td>
    <td ></td>
    <td ></td><td ></td>
    <td ></td>
    <td ></td>
    <td >
    <button class='tiempo_plan_boton_mas btn btn-success btn-sm'>+</button>
    <button class='tiempo_plan_boton_menos btn btn-danger btn-sm'>-</button>
    </td>
    </tr>   
    </tbody>
    </table>
4
  • lo acabo de adjuntar amigo el 12 dic. 2017 a las 15:28
  • 1
    Cuando añades el botón le asignas una clase tiempo_plan_boton_menos pero para disparar el evento seleccionar tiempo_plan_boton_mas ... no deberías de seleccionar tiempo_plan_boton_menos ? el 12 dic. 2017 a las 15:32
  • el evento que quise decir fue tiempo_plan_boton_mas, obvia el menos por favor el 12 dic. 2017 a las 15:36
  • Amigo lo único que te falta es que al agregar un nuevo nodo al DOM tienes que usar el evento on para que funcione el evento click es algo asi $("padre").on("click",".tiempo_plan_boton_mas",function(){ejecucion...} el 12 dic. 2017 a las 15:41

2 respuestas 2

2

Primero que todo debes cambiar tu selector:

$(".tiempo_plan_boton_mas").click(function(){
    $(this).closest('tr').css("background","cyan").after("<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td><button class='tiempo_plan_boton_mas'>+</button><button>-</button></td>");
})

Por este otro:

$(document).on('click', '.tiempo_plan_boton_mas', function(){
    $(this).closest('tr').css("background","cyan").after("<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td><button class='tiempo_plan_boton_mas'>+</button><button>-</button></td>");
})

La diferencia es que en el segundo selector estas seleccionando primero el documento y le estas indicando que busque un elemento (dentro del documento) y le aplique el evento click, mientras que en el primer selector estás accediendo directamente a un elemento que cuando se cargó el JS no existía, por eso no te funciona.


Ahora hablando de tu código tienes un error de lógica ya que al hacer un .after() estás añadiendo los <td> después del <tr> entonces al dar click a los botones creados éstos nunca van a encontrar un elemento padre <tr> por eso no se ejecuta nada.

Teniendo esto en cuenta vamos a agregar varios <tr> a tu <tbody>**

$(document).on('click', '.tiempo_plan_boton_mas', function(){
    $(this).closest('tr').css("background", "cyan").after("<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td><button class='tiempo_plan_boton_mas'>+</button><button>-</button></td></tr>");
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
    <thead>
        <tr>
            <th>Item</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>
                <button class='tiempo_plan_boton_mas'>+</button>
                <button>-</button>
            </td>
        </tr>
    </tbody>
</table>

8
  • Saludos camilo, excelente informacion, pero estoy probando el codigo y el boton nuevo no ejecuta ninguna accion el 12 dic. 2017 a las 15:49
  • @osmelg imagino que quieres agregar varios tr a tu tbody, si es así tienes un error en tu lógica, confirma para darte la solución. el 12 dic. 2017 a las 15:58
  • si es eso lo que quiero, cada vez que presione el boton, agregue un nuevo tr el 12 dic. 2017 a las 16:27
  • @osmelg ya te edité la respuesta puedes mirarla y probar ! el 12 dic. 2017 a las 16:29
  • Buen codigo camilo, pero hay un detalle, yo necesito que la nueva fila se agregue debajo de la fila donde se dio click, es por eso que tenia el after. el 12 dic. 2017 a las 17:07
1

Amigo ese es un problema muy común cuando actualizas el DOM en vez de usar el evento click() de jquery usa el evento on() que como parámetro recibe otro evento.

cambia tu código

 $(".tiempo_plan_boton_mas").click(function()
 {
  $(this).closest('tr').css("background","cyan").after("<td>1</td><td>2</td>
   <td>3</td><td>4</td><td>5</td><td>6</td><td><button 
   class='tiempo_plan_boton_mas'>+</button><button>-</button></td>");
  })

por este a ver si te funciona

$(document).on("click",".tiempo_plan_boton_mas",function()
 {
  $(this).closest('tr').css("background","cyan").after("<td>1</td><td>2</td>
   <td>3</td><td>4</td><td>5</td><td>6</td><td><button 
   class='tiempo_plan_boton_mas'>+</button><button>-</button></td>");
  })

El evento on() hace que se recorra de nuevo todo el html dentro de un objeto y así podemos usar el html dinámico que nos traemos después de rende rizar por primera vez la pagina.

Espero te ayude saludos.

Definición y uso

El método on () conecta uno o más controladores de eventos para los elementos seleccionados y elementos secundarios.

A partir de jQuery versión 1.7, el método on () es el nuevo reemplazo de los métodos bind (), live () y delegate (). Este método aporta mucha consistencia a la API, y recomendamos que utilice este método, ya que simplifica la base de código de jQuery.

Nota: Los manejadores de eventos adjuntos usando el método on () funcionarán para elementos actuales y FUTUROS (como un nuevo elemento creado por un script).

Consejo: Para eliminar manejadores de eventos, use el método off () .

Sugerencia: para adjuntar un evento que solo se ejecuta una vez y luego se elimina, use el método one () .


Sintaxis

$(selector).on(event,childSelector,data,function,map)

Fuente:www.w3schools.com

var root = 'https://jsonplaceholder.typicode.com';
$(".botonTraeHtml").click(function(){
$.ajax({
  url: root + '/posts/1',
  method: 'GET'
}).then(function(data) {
  $(".contenedorhtmlNuevo").html("<p>Este boton no va a funcionar porque usa la funcion normal click que no se ejecuta con html dinamico</p><button class='btnClickNormal' type='button' name='button'>Boton dinamico con evento click normal</button><br><br><p>Este boton si va a funcionar porque tiene la funcion on que ejecuta html dinamico</p><button class='btnClickOn' type='button' name='button'>Boton dinamico con evento On</button>")

});
})

//evento click normal que solo funciona con html no dinamico
$(".btnClickNormal").click(function(){
  alert("hola soy un boton traido dinamicamente")
})

//evento on click que funciona con cualquier html dinamico o no
$(".contenedorhtmlNuevo").on("click",".btnClickOn",function(){
  alert("hola soy un boton traido dinamicamente")
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button class="botonTraeHtml" type="button" name="button">Traer html dinamico</button>

<div class="contenedorhtmlNuevo">
    
  </div>

En tu caso lo que quieres es agregar un tr a una tabla y eliminarlo te dejo un ejemplo espero sea lo que necesitas

Para agregar un elemento antes usa la function after y en este ejemplo primero obtenemos el evento click despues con el parents("tr") vamos al padre tr y hay agregamos el nuevo elemento antes de el.

$("#table1").on("click",".btn-agregar",function(){
 $(this).parents("tr").after("<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td><button class='btn-agregar' type='button' name='button'>+</button><button class='btn-eliminar' type='button' name='button'>X</button></td></tr>").css({"background": "rgb(54, 207, 87)"})
})


//usamos el metodo on para los botones de los tr dinamicos para que pueda funcionar el evento click
$("#table1").on("click",".btn-eliminar",function(){
 $(this).parents("tr").remove()
})
*{
  font-family: arial;
  margin: 0px;
  padding: 0px;
}
table thead {
  background: rgb(228, 228, 228);
}
table thead th {
  padding: 10px;
}
table tr {
background: rgb(186, 186, 186);
}

table td {
  
  text-align: center;
}
table td button {
  padding: 10px;
}
button {
  padding:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table1">
    <thead>
      <tr>
        <th>valor1</th>
        <th>valor2</th>
        <th>valor3</th>
        <th>valor4</th>
        <th>valor5</th>
        <th>Agregar/Eliminar</th>
      </tr>
    </thead>
    <tbody>
      <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td><button class='btn-agregar' type='button' name='button'>+</button><button class='btn-eliminar' type='button' name='button'>X</button></td></tr>
    </tbody>
  </table>

6
  • Saludos Luis, excelente informacion, pero estoy probando el codigo y el boton nuevo no ejecuta ninguna accion el 12 dic. 2017 a las 15:49
  • esa es la idea los dos son botones son creados dinamicamente el primer botón no funciona porque tiene el click normal el segundo esta usando la función on y si funciona, ese es el que tienes que usar en nuevos elementos en el DOM eso es para el ejemplo. el 12 dic. 2017 a las 15:50
  • listo amigo te agregue un ejemplo acorde a tu caso espero te ayude el 12 dic. 2017 a las 16:49
  • Buen codigo luis, pero hay un detalle, yo necesito que la nueva fila se agregue debajo de la fila donde se dio click, es por eso que tenia el after. el 12 dic. 2017 a las 17:07
  • ya lo acomode a lo que quieres espero ahora si te ayude jeje saludos el 12 dic. 2017 a las 18:06

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.