jQuery设置没有元素的onclick事件

Question

I am writing a card list.
Before I draw a card, the card list is like this:

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

After I draw a card, the card list is like this:

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

How can I add an onclick function receiving the index at the same time :

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

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

Please note that I tried declaring mouseover function using jquery.click() but it only works when the DOM exists. I want to declare function even the DOM is not exist.

Answer 1

As I understood, parent <ul> element is static. So you may use event delegation :

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

Answer 2

A delegated-events approach attaches an event handler to only one element, the #cards-list , and the event only needs to bubble up one level (from the clicked li to ul ):

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

Reference: .on()