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>而不是新生成器ated行，所以不是一个常规表结构：

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

你得到这样的：如果你改变里面的for循环应该得到固定的代码

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

：

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