javascript - Jquery将点击事件关联到模态动态表的行

Question

我已将事件点击添加到我的动态表中，但它不起作用。

$("#gridVille").append('<table id="idTableVille" class="table table-striped table-hover">');
        $("#idTableVille").append('<thead>');
        $("#idTableVille thead").append('<tr><th>Code commune</th><th>Libellé</th></tr>');
        $("#idTableVille").append('</thead>');

        $("#idTableVille").append('<tbody>');
        for (i = 0; i < liste.length; i++) {
            $("#idTableVille tbody").append('<tr id="' +liste[i].id+ '">');
            $('#idTableVille tbody').append('<td scope="row" class="idCommune">' + liste[i].id+ '</td>');
            $('#idTableVille tbody').append('<td class="libelleCommune">' + liste[i].libelle+ '</td>');
            $("#idTableVille tbody").append('</tr>');
        }
        $("#idTableVille").append('</tbody>');
        $("#gridVille").append('</table>');

$('#idTableVille tr').click(function () {
 var id = $(this).find('td:eq(0)').text();
 var libelle = $(this).find('td:eq(1)').text();
 alert(id + ' ' + libelle);
});

此代码是在填充表后添加的。

场景是:

1. 我打开模态(引导模态)
2. 我填充表格
3. 我点击表格的任意行来获取列的值

Answer 1

您正在附加 <tr>元素到<tbody>然后还附加每个 <td>到<tbody>而不是新生成的行，因此不是常规的表结构:

<table>
<tbody>
    <tr id="something">
        <td>Something</td>
        <td>Hello!</td>
    </tr>
</tbody>
</table>

你得到这个:

<table>
<tbody>
    <tr id="something"></tr>
    <td>Something</td>
    <td>Hello!</td>
</tbody>
</table>

如果您更改 for 循环内的代码，它应该会得到修复:

for (i = 0; i < liste.length; i++) {
      $("#idTableVille tbody").append('<tr id="' +liste[i].id+ '">');
      $('#idTableVille tbody tr#' + liste[i].id).append('<td scope="row" class="idCommune">' + liste[i].id+ '</td>');
      $('#idTableVille tbody tr#' + liste[i].id).append('<td class="libelleCommune">' + liste[i].libelle+ '</td>');
}

如您所见，我将元素附加到新创建的行，并使用 id 来选择它。

您可以在这里看到它的工作原理:

https://jsbin.com/yojajisuca/edit?html,js,output