Question

我已经使用AJAX请求创建了一个表到我们库存中的项目数据库，显示了剩余的图片/部件名称/价格/库存。当表格显示时，我希望能够点击其中一行的任何部分，并将其链接到与该项目相关联的项目页面，但它不会起作用。

我已经尝试了on.click，并在html中写了一个静态表，但它运行正常。此外，如果我将on.click脚本指向表id而不是表id和tr，我可以使整个表可以单击到第一行的href。因此，似乎由于tr并不真正存在于html中，因此javascript无法找到它。有没有办法让脚本识别每个href属性？

HTML CODE + on.click脚本：

<html>    
        <body>
            <table id="ctable">
                <tbody id="tbody1" class="tbody1">
                </tbody>
            </table>

            <script>
                $('#ctable tr').click(function() {
                    var href = $(this).find("a").attr("href");
                    if(href) {
                        window.location = href;
                    }
                });
            </script>

        </body>
    </html>

.JS文件代码从.php文件/ mysql数据库创建表

 document.addEventListener('DOMContentLoaded', function() {
        $.post('test.php', function(data) {
            $("#tbody1").empty();

            $.each(JSON.parse(data), function (index, value){
                var eachrow = "<tr>" +
                "<td class=\"image\">" + '<img src="images/thumbs/' + 
                value.image + '">' + "</td>" +
                "<td>" + '<a href="' + value.link + '">' + value.part + " 
                </td>" +
                "<td>" + value.price + "</td>"
                "<td>" + value.stock + "</td>"
                "</tr>";
                $('#tbody1').append(eachrow);
            });
        });
    }, false);

Answer 1

如果要动态添加行，则需要重新构建click事件，以便从父级的上下文中进行侦听，如下所示：

$("#tbody1").on("click", "tr", function(e) {

});

假设#tbody1是一个很好的起点，因为您可能不希望标题行可以点击。或者，每次动态添加行时，由于代码正在重建表，您可以重新附加click事件处理程序：

      $("#tbody1").empty();

        $.each(JSON.parse(data), function (index, value){
            var eachrow = "..
            $('#tbody1').append(eachrow);
        });

        // or .on("click", function() { })
        $("#tbody1 tr").click(function() { });

如果您通过on附加点击处理程序，那么最好执行以下操作：

$("#tbody1").off("click", "tr");

删除现有的点击处理程序。

创建js填充表的可单击行

1 个答案: