將onclick事件添加到動態生成的表中

Question

我一直在研究一個功能，它涉及使用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])"

這不起作用，它說帳戶沒有定義。

有人可以給我一個提示或提供幫助，以實現這一目標嗎？ 提前致謝！

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>