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（）声明鼠标悬停功能，但它仅在DOM存在时才有效。我想声明函数，即使DOM不存在。

Answer 1

据我所知，父<ul>元素是静态的。所以你可以使用event delegation：

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

Answer 2

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

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

参考：.on()

Jquery设置没有元素的onclick事件

2 个答案: