javascript - 当用户单击任何列表元素时运行函数

Question

这可能是一个很常见的问题，但我自己找不到答案；

我的所有列表元素都像这样调用函数 setQuery

onClick="admin_stats.setQuery(this);"

有没有办法在单击列表元素时简单地运行它，而不是[硬编码]将其添加到每个列表元素？

我对 jQuery Live 或绑定(bind)/解除绑定(bind)不太熟悉，但我认为它们会在这里发挥作用？

在我重新发明一个看起来相当方形的轮子之前，我想我可能会问=)

<小时/> 编辑:我的列表元素看起来像

<ul>
    <li id="usersPerMonth" onClick="admin_stats.setQuery(this);">Users per Month</li>
    <li id="statsByUser" onClick="admin_stats.setQuery(this);">Stats by User</li>
</ul>

然后使用 this.attr("id") 从 json 样式变量中查找实际的 SQL 文本:

queries : {
    usersPerMonth : " ... some sql ...",
    statsByUser   : " ... some sql ...",
    ...
}

这就是为什么我以这种方式命名 div(并且我愿意接受设计建议)

Answer 1

$(function() {
    $('#myList').delegate('li', 'click', function() {
        admin_stats.setQuery( this );
    });
});

这假设您的 <ul>元素的 ID 为 myList 。它将处理任何 <li> 上的点击。元素，调用您的函数并传递 this作为参数。

.delegate() 代码包含在 $(function() {}); 中以便在 DOM 准备好之前它不会运行。这是 jQuery 的快捷方式 .ready() 功能。