Делегирование событий в jquery динамическим элементам
Привет у меня есть следующая проблема. Я много искал здесь и в google, и я не могу найти проблему.
у меня есть таблица, которая динамически обновляется: PHP + Mysql + Jquery
таблица, которая изначально загружается, выглядит следующим образом:
<table class="table table-striped table-bordered table-hover">
<tbody>
<tr>
<td><i class="fa fa-envelope fa-1x" title="Cerrada"></i> RA 02-16 </td>
<td>15-087B-16-1</td>
<td>950,00</td>
<td style="text-align: right">118385,50</td>
<td style="text-align: right">118385,57</td>
<td style="text-align: center"><a href="#viewC" data-value="4" data-toggle="modal" class="link-view-c"><i class="fa fa-eye link-view-c-child" data-value="4" aria-hidden="true"></i></a></td>
</tr>
<tr>
<td><i class="fa fa-envelope fa-1x" title="Cerrada"></i> RA 17-17</td>
<td>15-087B-17-2</td>
<td>142,00</td>
<td style="text-align: right">11112,12</td>
<td style="text-align: right">11112,12</td>
<td style="text-align: center"><a href="#viewC" data-value="14" data-toggle="modal" class="link-view-c"><i class="fa fa-eye link-view-c-child" data-value="14" aria-hidden="true"></i></a></td>
</tr>
</tbody>
у меня есть следующее, чтобы захватить идентификатор, который я определяю в поле data-value в link в последнем столбце.
<script>
$(document).ready(function () {
$(".link-view-c").on('click', '.link-view-c-child', function () {
v = $(this).data('value');
alert(v);
});
});
Проблема в том, что при инициализации таблицы он загружает первый блок, я получаю идентификатор, но когда я перехожу к следующему блоку, он ничего не делает. И я использую
on('evento', 'destino', function())
предполагается, что class link-view-c-child из второго блока запускает событие.
любая помощь, которая избавит меня от этого, пожалуйста.
Sldos
2 answers
Для выполнения событий с jquery над динамически созданными элементами используйте следующее;
$(document).on( 'evento click,change,blur,etc', '#idelemento .clase', function(){
//Todo el código aqui
} );
С этим вы будете ссылаться на DOM поэтому он будет искать любой элемент с классом или идентификатором при выполнении события, которое вы хотите.
1) Как говорит Я Альберт, в этом случае лучше попросить DOM найти элементы, чем установить его в определенном селекторе.
2) Если вы не перемещаете много кода, попробуйте поместить события и классы поверх TD, а не внутри.
3) Если внутри TD есть элементы, которые вам нужны как <a>, Вы можете использовать $(this).find('a').text() например
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>$(function(){
$(document).on('click', '.link-view-c', function () {
v = $(this).data('value');
alert(v);
});
}) <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<table class="table table-striped table-bordered table-hover">
<tbody>
<thead>
<tr>
<th>Head</th>
<th>Head</th>
<th>Head</th>
<th>Head</th>
<th>Head</th>
<th>Head</th>
</tr>
</thead>
<tr>
<td><i class="fa fa-envelope fa-1x" title="Cerrada"></i> RA 02-16 </td>
<td>15-087B-16-1</td>
<td>950,00</td>
<td style="text-align: right">118385,50</td>
<td style="text-align: right">118385,57</td>
<td class="link-view-c" aria-hidden="true" data-value="4" data-toggle="modal" style="text-align: center"><a href="#viewC" ><i class="fa fa-eye link-view-c-child" ></i></a></td>
</tr>
<tr>
<td><i class="fa fa-envelope fa-1x" title="Cerrada"></i> RA 17-17</td>
<td>15-087B-17-2</td>
<td>142,00</td>
<td style="text-align: right">11112,12</td>
<td style="text-align: right">11112,12</td>
<td style="text-align: center" data-value="14" class="link-view-c" aria-hidden="true" data-toggle="modal" ><a href="#viewC" ><i class="fa fa-eye link-view-c-child" data-value="14" ></i></a></td>
</tr>
</tbody>
</table>