Jquery 如何在动态添加的数据值上选择元素？

我正在编写一个基于日历的系统。它显示为一个表。一个事件可以占用多个不同的表格单元格，我希望在悬停时突出显示单个事件的所有单元格。我以前做过好几次，但我面临一个新问题

这一次，日历表及其内容是动态生成的，因为当用户试图保存新事件时，它是潜在冲突事件的预览

在链接元素上的悬停样式时，我使用基于现有事件ID的数据值作为标识符。我触发一个mouseover和mouseout事件，它在与悬停元素具有相同数据值的元素上切换一个“悬停”类

但是，当我动态地将数据值添加到表格单元格中时，它不会显示在相关元素的HTML中，也不会显示在我的chrome inspector中。我仍然可以选择一个相关的元素，并通过控制台命令行检查它是否具有数据值，并且它实际上具有数据值。但悬停样式和检查器中显示的HTML并不反映这一点

我制作了一个简化的提琴，我只有一个简单的按钮，将“1”作为数据值添加到六个表格单元格中的四个。在动态表下面是一个静态表，它已经有了数据值。请注意，在单击按钮之前不会启动悬停样式链接。单击该按钮后，静态表具有工作悬停链接，而动态更新的表没有。嗯，它有一种作用。悬停动态表中的元素将成功链接到静态表，并且仅链接到静态表。这让我相信，是CSS选择动态更新的元素和数据值失败了

请注意，来自动态表的id为的单个元素报告数据值实际上已在其上设置

如何使动态表工作，使悬停链接可见

HTML:

CSS:

---

您对

.data（）

的功能有误解，因此请阅读文档中的内容。您不应该像这样使用

数据

，但可以使用

.attr（'data-value'，1）在标记中设置
数据值
您使用的是toggleclass，根据文档，您实际上不需要任何标志或数据属性：。数据（键、值）返回：jQuery说明：存储与匹配元素关联的任意数据。通过jquery的.data（）函数设置数据值似乎是完全合法的。在提问之前，我确实阅读了文档。请详细说明您认为我的误解是什么@CBroe？
。数据
不会影响标记，您使用的是
css
。您对
.data（）
的作用有误解，所以请在文档中详细阅读。您不应该像这样使用
数据
，但是您可以使用
.attr（'data-value'，1）在标记中设置
数据值
您使用的是toggleclass，根据文档，您实际上不需要任何标志或数据属性：。数据（键、值）返回：jQuery说明：存储与匹配元素关联的任意数据。通过jquery的.data（）函数设置数据值似乎是完全合法的。在提问之前，我确实阅读了文档。请详细说明您认为我的误解是什么@CBroe？
。数据
不会影响标记，您使用的是
css
。
<button onclick="add_data()">
Add Data (and hover links)
</button>

<table>
<tr>
   <td class="taken"></td>
   <td class="taken" id="random-td"></td>
   <td class="taken"></td>
</tr>
<tr>
   <td></td>
   <td></td>
   <td class="taken"></td>
</tr>
</table>

<br/>

<table>
<tr>
   <td class="taken" data-value="1"></td>
   <td class="taken" data-value="1"></td>
   <td class="taken" data-value="1"></td>
</tr>
<tr>
   <td></td>
   <td></td>
   <td class="taken" data-value="1"></td>
</tr>
</table>

window.add_data = function(){

    console.log($('#random-td').data('value')); //undefined

    $('.taken').data("value", 1);

  $("td.taken").mouseover(function(){
        var value = $(this).data("value");
        $("td.taken[data-value='1']").toggleClass("hovered");
    });
    $("td.taken").mouseout(function(){
        var value = $(this).data("value");
        $("td.taken[data-value='1']").toggleClass("hovered");
    });

  console.log($('#random-td').data('value')); // 1
}

td{
  width: 50px;
  height: 20px;
}

td.taken{
  background-color: #19b4e0;
}

td.taken.hovered, 
td.taken:hover{
    background-color: #75D2EC;
}