在鼠标悬停事件期间为动态生成的表添加弹出窗口

Question

javascript和jquery相对较新，我对jquery中的事件侦听器有几个问题。

所以我有一个HTML表单，它可以动态生成一个表。

目标是创建一个事件，这样当我悬停在某个单元格上时，它旁边会出现一个弹出窗口

我试过这个：

HTML-JS连接到的标签

let td_inter = document.createElement('td')
td_inter.innerHTML = "test"           
td_inter.classList = 'popover'
td_inter.setAttribute('data-html', 'test')
td_inter.setAttribute('data-position',"bottom left")
td_inter.setAttribute('data-variation',"very wide")

JS-

$(document).on("mouseover", 'td.popover', function() {
$('td.popover')
.popup({
on: 'hover',
});
})

我尝试这样做的原因是，上面有一个以前的静态div，下面的代码有效。

HTML-JS连接到的标签

<div class='thirteen wide field'>
<div class='desc' id='test_desc' data-html="" data-position="bottom left" data-variation="very wide">
<label for="test">test label</label>
</div>
</div>

JS-

$('div.desc')
.popup({
on: 'hover',
});

我意识到我需要使用.on来使它为动态生成的表工作，但它似乎不起作用。当我悬停时，事件似乎起作用(我只是尝试控制台.log(，但我无法显示弹出窗口。我必须把它放在div中吗？

附加背景：如果有帮助的话，我会使用语义ui。如果有帮助的话，我还包括了这些资源：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>    
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>

Answer 1

您可以在JS中尝试以下代码而不是使用document.mouseover:吗

$('td.popover')
.popup({
on: 'hover',
});

Answer 2

对于所有感兴趣的人来说，我必须重组我的动态表，将其生成如下内容：

HTML:

<table class="ui table">
<thead>
<tr>
<th class="one wide">Key</th>
<th class="two wide">Value</th>
</tr>
</thead>
<tbody>
<tr class="popover">
<td>1</td>
<td>Foo</td>
</tr>
<div class="ui popup mini transition hidden">Foo Longer</div>
</tbody>
</table>

JS:

$(document).on('mouseover', '.popover', function() {
$(this)
.popup({
popup: $('div.popup'),
inline:true,
on:'hover',
position: 'right center',
lastResort: 'right center',
}).popup('show');
});

div.popup被设置为隐藏，并且一旦事件得到满足就会变为可见(在这种情况下为mouseover(。

示例：https://jsfiddle.net/gr0e4cwt/11/