如何在 HTML 列表的项目符号上添加事件？

Question

如何在 HTML 列表的项目符号上添加事件？ 可能吗？

Answer 1

$('ul li').on( "click" , function(){
    // do stuff
});

Answer 2

您可以使用

$(document).ready(function() {
  $("li").click(function(event){
    // do something
  });
}

Answer 3

你想处理点击事件还是其他东西，比如 DOMSubtreeModified？ 这是一个例子： http://jsfiddle.net/quant/At7xd/

HTML：

<h1>Some simple events</h1>
<ul id="list">
    <li>Item 1</li>
    <li>Item 2</li>
</ul>
<button>Add Item</button>​

JavaScript：

jQuery(document).ready(function($) {
    $("#list").on("DOMSubtreeModified", function(e) {
        console.log("DOMSubtreeModified event", e);
        $("h1").toggleClass("crazy");
    });
    $("#list").on("click", "li", function(e) {
        console.log("Clicked on an li:", $(e.currentTarget).html(), e);
        e.stopPropagation();
    });
    $("button").on("click", function(e) {
        console.log("Clicked on button", e);            
        $("#list").append("<li>Item " + ($("#list > li").size() + 1) + "</li>");
    } );
});