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

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使其适用于动态生成的表，但似乎不起作用。当我将鼠标悬停时，该事件似乎可以正常工作（我只尝试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',
});