为导入的 js 文件中的元素创建处理程序

【问题标题】：Creating handlers in for elements in imported js file为导入的 js 文件中的元素创建处理程序
【发布时间】：2022-11-02 04:57:07
【问题描述】：

假设我有这样的cards.js文件

$('.user_hoverable').mouseenter(function() {
    // Get user id from card_data-uid attribute
    let uid = $(this).attr('card_data-uid');
    console.log(`User ${uid} hovered`);
});

然后我将它导入到我的 html 文件中并设置所需的一切

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

但它不起作用，我尝试将它放入目标 html 文件本身，即使元素是动态创建的，它也能正常工作。我也尝试等到页面加载到 card.js 文件中，但效果不佳。

我还想补充一点，元素是动态创建的。

【问题讨论】：

标签： javascript html jquery

【解决方案1】：

如果您希望事件处理程序在添加的元素上触发后您已附加事件处理程序，您必须使用 jQuery.on() 的“委托事件处理程序”变体。您可以通过指定 jQuery.on() 的 selector 参数来执行此操作，请参阅 https://api.jquery.com/on/

$( document ).on( {
    "mouseenter": function() { /* your mouseenter event handler */}
  },
  ".user_hoverable" );

这里我们将事件处理程序附加到document，但您也可以选择.user_hoverable 元素的任何父元素。

这也可以解决您的第一个问题，这可能是由于事件处理程序附件的时间与在 DOM 中包含您的 <div> 引起的。

【讨论】：