将<li>元素附加到<ul>并为每个元素添加click事件？

Question

我想在a中添加一系列<li>元素<ul>,并以编程方式为每个元素添加一个click事件.

我不知道如何做到这一点,至少不是以一种简洁的jQueryish方式.

这是我现有的代码:

<ul id="saved-list"></ul>
<script type="text/javascript">
$.each(all_objects, function() {{
    var list_route = "<li><a href='#saved-route'>" + this.text + "</a></li>";
    $('#saved-list').append(list_route);      
    // add unique id (this.id) to item and click event here?
    // pseudocode - onclick: alert(this.id);
});
$('#saved-list').refresh('listview'); // jquery mobile list refresh
</script>

请有人建议如何以编程方式将click事件添加到每个列表项？

更新:我需要为每个列表项做一些略微不同的事情(让我们只是说一个提醒) - 道歉没有说清楚.

Answer 1

您最好使用.live()或.delegate()担心.click()在您创建的每个元素上创建处理程序.像这样的东西:

$('#saved-list').delegate('li', 'click', function () {
    // do stuff on click
});

您只需绑定此单击侦听器一次,它将适用于<li>具有ID的元素的后代saved-list.

如果你想为每个人创建一个单独的点击处理程序<li>(虽然我不建议这样做),这是一个很好的方法:

$.each(all_objects, function() {
    var $a = $('<a/>', {
        href: '#saved-route',
        text: this.text
    });

    var $li = $('<li/>', {
        click: function () {
            // do stuff on click
        }
    }).append($a);

    $('#saved-list').append($li);
});

Answer 2

别.

不是为每个元素绑定一个新的事件处理程序(可能会变得非常昂贵),而是将单个事件处理程序绑定到#saved-list,这是一个共同的祖先.事件冒泡意味着祖先元素会被通知其后代上的事件,因此您可以在那里处理事件而不是在原始元素上处理事件.

像这样......

$.each(all_objects, function() {{
    var list_route = "<li><a href='#saved-route'>" + this.text + "</a></li>";
    $('#saved-list').append(list_route);      
});
$('#saved-list').delegate('li', 'click', function() {
    // do something here each time a descendant li is clicked
});

看到 delegate