javascript - 动态生成的日历元素上的 jQuery 单击事件？

Question

以下问题的答案question ,

var counter = 0;
$("button").click(function() {
 $("h2").append("<p class='test'>click me " + (++counter) + "</p>")
});

$("h2").on("click", "p.test", function(){
 alert($(this).text());
});

我有一个动态生成的日历，当您单击某一天时，它不会打开新的网页，而是将日历交换为当天的事件。这些事件列在表格中，我希望能够单击一行并让它触发一个使用 location.assign() 的函数。因此每一行如下所示，

<tr id="message-7">

日历中的新页面加载并创建，

<tr id="message-132">

点击不会触发该功能。在另一个问题的示例中，它访问元素的文本以使元素唯一，而不是像我的情况那样为元素提供唯一的 id #。

我处理问题的方式是否错误？我可以添加一些可以引用的内容，例如 "title=132" 标记吗？

Answer 1

理想情况下，尽量不要让 ID 具有太多含义。相反，使用数据作为 shown here 。

所以而不是

<tr id="message-7">

使用

<tr id="1234567" data-message="7">

然后在代码中您可以将数据寻址为:

var messageVal = $("#1234567").data("message")

如果您需要添加通用点击事件，那么您可能需要对所有适当的 TR 使用虚拟 css 类分配:

 <tr id="1234567" data-message="7" class="messageRow">

这样你就可以写

$(".messageRow").on("click", function(event){
    event.preventDefault()
    var messageVal = $(this).data("message")

这在只有某些 TR 包含可点击内容的情况下非常有用 - 只是不要将该类分配给其他 TR。