将 onclick 事件添加到动态生成的表中答案

【问题标题】：add onclick event to dynamically generated table将 onclick 事件添加到动态生成的表中
【发布时间】：2018-04-22 13:16:53
【问题描述】：

我一直在研究一项功能，该功能涉及使用 jquery 创建 HTML 表，该表将在页面加载时动态显示帐户列表，这是我毫无问题地实现的。

但是，我还要求为每一行添加一个“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
        }

“goAnotherWebPage”方法应该接收到正在显示的相同帐户 ID，我对此没有任何问题，当我在创建表时将 x[i] 作为参数传递时出现问题：

onclick="goAnotherWebPage(x[i])"

这不起作用，它表示帐户未定义。

有人可以给我一个提示或提供帮助以实现这一目标吗？提前致谢！

【问题讨论】：

标签： javascript jquery html-table onclick

【解决方案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>

希望这会对你有所帮助。

【讨论】：

我就是这样做的。
完美，它有效，也许是一个愚蠢的问题，但这是我第一次使用 jquery。谢谢！

【解决方案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>

【讨论】：