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. は、私は、テーブルの任意の行にクリックし、テーブルを移入

Answer 1

<tbody>に<tr>要素を追加しています。さらに、<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