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

Question

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

所以我有一个动态生成 table 的 HTML 表单。

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

我试过这个：

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 来使其适用于动态生成的 table，但它似乎不起作用。当我悬停时该事件似乎有效（我只是尝试 console.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

对于所有感兴趣的人，我不得不重组我的动态 table 以将其生成如下所示：

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/

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

adding a popup during a mouseover event for a dynamically generated table

javascript

jquery

semantic-ui