Greetings, I am doing this 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>");
The issue is that the attribute that I am adding to the button does not seem to be active, since when I click on the button, nothing happens. Why is this behavior due?
This is the click event
$(".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>");
})
The board
<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>
First of all you have to change your selector:
For this other one:
The difference is that in the second selector you are selecting the document first and you are telling it to look for an element (within the document) and apply the event
click
to it, while in the first selector you are directly accessing an element that when the JS was loaded It didn't exist, that's why it doesn't work for you.Now talking about your code you have a logic error because when you do a
.after()
you are adding the<td>
after<tr>
then when you click on the created buttons they will never find a parent element<tr>
so nothing is executed.With this in mind we are going to add several
<tr>
to your<tbody>
**Friend, that is a very common problem when you update the DOM instead of using the jquery
click()
event , use the event that receives another event as a parameter.on()
change your code
for this to see if it works for you
The event causes the entire inside of an object
on()
to be traversed again and so we can use the dynamic that we get after rendering the page for the first time.html
html
I hope it helps you, greetings.
Definition and use
Syntax
Source : www.w3schools.com
In your case what you want is to add a
tr
to a table and delete it I leave you an example I hope it is what you needTo add an element before use the function
after
and in this example we first get the click event then with itparents("tr")
we go to the parenttr
and there we add the new element before it.