导入JS文件中动态元素mouseenter事件绑定失效问题求助

问题根源 #

直接通过$('.user_hoverable').mouseenter()绑定事件，只会对代码执行时已存在于DOM中的元素生效。你页面内的元素是动态创建的（事件绑定代码执行后才生成），因此新元素不会被绑定事件。

解决方案：使用事件委托 #

利用jQuery的事件委托机制，将事件绑定到页面加载时就存在的父元素（比如document，或更接近目标元素的静态容器），由父元素监听冒泡上来的事件，这样动态创建的元素也能触发事件。

修改后的cards.js代码：

// 可替换成页面中始终存在的父容器选择器，比绑定到document性能更好
$(document).on('mouseenter', '.user_hoverable', function() {
    // 推荐用data()方法获取符合HTML规范的自定义属性
    let uid = $(this).data('uid');
    console.log(`User ${uid} hovered`);
});

同时建议将HTML中的自定义属性改为符合规范的data-uid（可选，但更标准）：

<script src='./card.js'></script>
<div class="user_hoverable card-box" data-uid='221'></div>

额外提示 #

• 优先选择最近的静态父元素作为事件委托的载体，减少事件冒泡的性能开销。
• 自定义属性遵循HTML5的data-*规范，既符合标准，也能通过jQuery的.data()方法更便捷地读取值。

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