javascript - jquery设置没有元素的onclick事件

Question

我正在写一张卡片 list 。
在我抽卡之前，卡牌列表是这样的:

<div id="cards-div">
    <ul id="cards-list">
    </ul>
</div>

我抽到一张牌后，牌表是这样的:

<div id="cards-div">
    <ul id="cards-list">
        <li>hello</li>
    </ul>
</div>

如何添加一个onclick函数同时接收索引:

<div id="cards-div">
    <ul id="cards-list">
        <li onclick="mouseoverCard(index)">hello</li>
    </ul>
</div>

mouseoverCard: function(index) {
    alert(index);
}

请注意，我尝试使用 jquery.click() 声明鼠标悬停功能，但它仅在 DOM 存在时有效。即使 DOM 不存在，我也想声明函数。

Answer 1

据我了解，家长<ul>元素是静态的。所以你可以使用 event delegation :

$("#cards-list").on("click", "li", function(e) {
    var i = $(this).index();
    // ...
});