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

據我了解，parent <ul>元素是靜態的。 因此，您可以使用事件委托 ：

$("#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（）