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());
});

我有一个动态生成的日历，当您单击某一天时，它不会打开新网页，而是将日历替换为当天的事件。这些事件列在 table 中，我希望能够单击一行并让它触发一个使用 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 class 分配：

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

这样你就可以写

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

这在只有一些 TR 包含可点击内容的情况下很有用 - 只是不要将 class 分配给其他人。

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

jQuery click event on dynamically generated elements for calendar?

javascript

jquery

calendar

jquery-selectors