動的に生成されたテーブルにonclickイベントを追加します

Question

私は、ページロード時に動的にアカウントリストを表示するjqueryを使用してHTMLテーブルを作成する機能に取り組んでいます。

しかし、私は別のWebページにリダイレクトされる "onclick"イベントを各行に追加するよう依頼しましたが、それは渡す必要のあるパラメータに依存します。ここに私のコードです：

$(document).ready(function() { 
      var x = ['Visa-1234', 'Amex-9182', 'Visa-8162', 'Visa-9554']; 
      var message = 'No accounts found'; 

      if (x.length > 0) { 
       message = 'Select an account to display the rewards information: '; 
      } 

      $('#message').text(message); 

      var tableContentHtml = '<table class="table-fill"><thead><tr><th class="text-left">Account</th></tr></thead><tbody class="table-hover">'; 

      for (var i = 0; i < x.length; i++) { 
       tableContentHtml += '<tr><td class="text-left" onclick="goAnotherWebPage()">' + x[i] + '</td></tr>'; 
      } 

      tableContentHtml += '</tbody></table>'; 
      $(tableContentHtml).appendTo('#container'); 
     }); 

     function goAnotherWebPage(account) { 
      //do some logic here 
     } 

私はXを通過したときに表示されているのと同じアカウントIDを受けるべき方法「goAnotherWebPage」は、私はそれで問題はない、問題が来る[i]は、テーブル上のパラメータとして、作成：

onclick="goAnotherWebPage(x[i])" 

これは機能していないと、アカウントが定義されていないと表示されます。

これを達成するために誰かが私にヒントを与えたり、助けを与えることができますか？前もって感謝します！

Answer 1

for (var i = 0; i < x.length; i++) { 
    tableContentHtml += '<tr><td class="text-left" onclick="goAnotherWebPage(\'' + x[i] + '\')">' + x[i] + '</td></tr>'; 
} 

$(document).ready(function() { 
 
    var x = ['Visa-1234', 'Amex-9182', 'Visa-8162', 'Visa-9554']; 
 
    var message = 'No accounts found'; 
 

 
    if (x.length > 0) { 
 
    message = 'Select an account to display the rewards information: '; 
 
    } 
 

 
    $('#message').text(message); 
 
    var tableContentHtml = '<table class="table-fill"><thead><tr><th class="text-left">Account</th></tr></thead><tbody class="table-hover">'; 
 

 
    for (var i = 0; i < x.length; i++) { 
 
    tableContentHtml += '<tr><td class="text-left" onclick="goAnotherWebPage(\'' + x[i] + '\')">' + x[i] + '</td></tr>'; 
 
    } 
 

 
    tableContentHtml += '</tbody></table>'; 
 
    $(tableContentHtml).appendTo('#container'); 
 

 
    goAnotherWebPage = function(account) { 
 
    console.log(account); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="message"></div> 
 
<div id="container"></div>

これを試してみては、これはあなたを助けることを願っています。

Answer 2

は、私はあなたが必要なんかを理解しようと、私は簡単なデモを作成し、私はそれをやった正確にどのように

$(document).ready(function() { 
 
      var x = ['Visa-1234', 'Amex-9182', 'Visa-8162', 'Visa-9554']; 
 
      var message = 'No accounts found'; 
 

 
      if (x.length > 0) { 
 
       message = 'Select an account to display the rewards information: '; 
 
      } 
 

 
      $('#message').text(message); 
 

 
      var tableContentHtml = '<table class="table-fill"><thead><tr><th class="text-left">Account</th></tr></thead><tbody class="table-hover">'; 
 

 
      for (var i = 0; i < x.length; i++) { 
 
       tableContentHtml += '<tr><td class="text-left redirect">' + x[i] + '</td></tr>'; 
 
      } 
 

 
      tableContentHtml += '</tbody></table>'; 
 
      $(tableContentHtml).appendTo('#container'); 
 
     }); 
 

 
    $('body').on('click', '.redirect', function (e) { 
 
     value = $(this).html(); 
 
     console.log(value); 
 
     // do your logic here 
 
    }) 
 
    

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="message"></div> 
 
<div id="container"></div>