动态创建的jQuery Dropdown hover功能异常，请求技术支持

核心原因分析 #

静态渲染的Dropdown能正常hover，动态添加的不行，大概率不是CSS没加载，而是事件绑定范围没覆盖到动态元素，或者CSS选择器和动态元素的结构不匹配。

具体解决步骤 #

1. 改用事件委托绑定hover事件

如果之前是直接给静态元素绑定hover：

// 这种写法只对页面加载时存在的.dropdown生效
$('.dropdown').hover(function() {
  $(this).toggleClass('open');
});

改成事件委托，把事件绑定到父级容器（比如document或者更靠近的固定容器）：

// 事件委托会监听所有现有和未来的.dropdown元素
$(document).on('mouseenter', '.dropdown', function() {
  $(this).addClass('open');
}).on('mouseleave', '.dropdown', function() {
  $(this).removeClass('open');
});

原理：事件冒泡机制让父级能捕获子元素的事件，不管子元素是静态还是动态生成的。

2. 验证CSS匹配度

打开浏览器F12开发者工具，检查动态生成的Dropdown：

• 确认它的类名、HTML结构和静态Dropdown完全一致，比如静态的是.dropdown > .submenu，动态的不能多嵌套一层div，否则CSS的子选择器>会匹配失败。
• 查看hover状态下的样式（比如.dropdown:hover .submenu）是否被正确应用，如果是用类控制显示，确认mouseenter时是否成功添加了open类。

3. 排查焦点干扰问题

hover时焦点丢失可能是：

• 动态元素的事件被其他代码用stopPropagation()或preventDefault()阻止了冒泡，导致父级的hover监听不到。
• 静态Dropdown有tabindex属性来维持焦点，动态添加时没带上，补上即可：

  // 动态创建时加上tabindex
  var newDropdown = $('<div class="dropdown" tabindex="0"><button>动态菜单</button><div class="submenu">...</div></div>');
  

4. 极简示例测试

如果上面的步骤没解决，先写个极简代码排除干扰：

<div class="dropdown">
  <button>静态菜单</button>
  <div class="submenu">子菜单</div>
</div>
<button id="addBtn">添加动态菜单</button>

<style>
  .dropdown { position: relative; display: inline-block; margin: 0 10px; }
  .submenu { display: none; position: absolute; top: 30px; left: 0; padding: 10px; background: #fff; border: 1px solid #eee; }
  .dropdown:hover .submenu, .dropdown.open .submenu { display: block; }
</style>

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
  // 事件委托绑定hover
  $(document).on('mouseenter', '.dropdown', function() {
    $(this).addClass('open');
  }).on('mouseleave', '.dropdown', function() {
    $(this).removeClass('open');
  });

  // 动态添加
  $('#addBtn').click(function() {
    $(this).before('<div class="dropdown"><button>动态菜单</button><div class="submenu">动态子菜单</div></div>');
  });
</script>

如果这个示例能正常工作，说明你的项目里有其他代码（比如冲突的JS、高优先级的CSS）干扰了功能。

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