动态添加的span元素事件绑定失效问题求解决方案

咱们先拆解下你代码里的核心问题，再一步步修正：

首先看你代码里的关键错误 #

1. 选择器语法完全写错了：你写的$('$data-show')是无效语法——目标元素的id是show-data，jQuery里id选择器必须用#开头，正确的写法应该是$('#show-data')。
2. 你提到要“点击某个单词后添加span”，但当前代码只写了鼠标移到span上的事件逻辑，咱们先把事件绑定不生效的核心问题解决，再补全触发添加的逻辑。

修正后的完整代码示例 #

<!-- 先确保jQuery在你的自定义代码之前加载 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- 目标容器 -->
<div id="show-data"></div>

<!-- 假设的触发元素（你可以替换成实际要点击的单词元素） -->
<p>点击这个<span id="trigger-word">单词</span>添加新内容</p>

<script>
// 1. 实现点击触发元素后，向show-data添加span的逻辑
$('#trigger-word').on('click', function() {
  $('#show-data').append(`
    <span>Erprobung</span>
    <span>Probe</span>
    <span>Prüfung</span>
    <span>Test</span>
  `);
});

// 2. 正确绑定动态生成span的mouseover事件（事件委托）
$('#show-data').on('mouseover', 'span', function() {
  alert("Test");
  // 如果需要操作当前hover的span，还可以用$(this)，比如：
  // $(this).css('color', 'blue');
});
</script>

关键细节解释 #

• 事件委托的正确用法：因为span是动态添加到DOM中的，不能直接给还不存在的span绑定事件，必须把事件绑定到已经存在的父容器（也就是#show-data）上，通过第二个参数指定要监听的子元素选择器，这样后续新增的span也能正常触发事件。
• 选择器的基础语法：jQuery里id选择器用#id名称，类选择器用.类名称，你之前的$data-show完全不符合语法规范，这是事件绑定失效的最主要原因。
• jQuery加载顺序：必须在你的自定义脚本之前加载jQuery库，否则$函数会未定义，所有jQuery代码都无法运行。

如果你的触发元素不是上面示例里的#trigger-word，只需要把触发事件的选择器改成你实际要点击的元素即可。

内容的提问来源于stack exchange，提问作者user3071873