Question

这是一个非常简单的代码，但我不知道问题出在哪里。所以我在我的客户端上有这个代码：

socket.on('newRoom', function (data){
    var newTr = $("<tr>");
    newTr.attr("data-id", data.roomId);
    $('table').append(newTr);
});

这是我想要执行的代码：

$('table tr').on('click', function() {
    console.log($(this).data("id")); /* This code doesnt't work */
    console.log("test"); /* This code works */
});

有人可以帮帮我吗？

Answer 1

尝试使用：

console.log($(this).attr("data-id"));

而不是你的代码。

Answer 2

您可能在将tr添加到DOM之前安装事件处理程序。在您的示例中，您使用的是直接事件，只有在DOM中已存在目标元素（table tr）时才会起作用。

要处理DOM中尚未（尚未）的元素的事件，您需要使用event delegation：

$('table').on('click', 'tr', function() { console.log($(this).data("id")); console.log("test"); });

这样，事件处理程序附加到已经在DOM中的元素（table元素，虽然我假设它也没有生成），并且click事件将是委托给（动态插入）tr元素。

jQuery：新元素上的.data（“id”）不起作用

2 个答案: