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

Question

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

<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() 声明 mouseover 函数，但它仅在 DOM 存在时才有效。即使 DOM 不存在，我也想声明函数。

Answer 1

据我了解，父<ul>元素是静态的。所以你可以使用事件委托：

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

Answer 2

委托事件方法仅将事件处理程序附加到一个元素，#cards-list，并且事件只需要冒泡一个级别（从 clickedli到ul）：

$("#cards-list").on("click", "li", function(event){
     alert($(this).index());
});

参考：.on()