Question

我想向<li>添加一系列<ul>元素，并以编程方式为每个元素添加点击事件。

我不知道该如何做到这一点，至少不是以一种简洁的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>

有人可以建议如何以编程方式为每个列表项添加点击事件吗？

更新：我需要为每个列表项做一些稍微不同的事情（让我们只是说一个提醒） - 道歉没有说清楚。

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

Answer 3

@Matt Ball非常接近这里的答案，但我会更清楚地说明你可以根据点击的元素对委托做不同的事情：

<ul id="saved-list"></ul>
<script type="text/javascript">
var $savedList = $("#saved-list");
$.each(all_objects, function() {
    $savedList.append("<li><a href='#saved-route'>" + this.text + "</a></li>");
});
$savedList.delegate("li", "click", function (e) {
    alert($(this).text());
});

。

$（ '＃保存列表'）刷新（ '列表视图'）; // jquery移动列表刷新

请注意，代理this仍然指的是点击的li。

Answer 4

在当前循环中（或之后）添加它是不够的？

$('#saved-list li').click(function(){ alert('hello'); });

Answer 5

你好，在jquery中你可以创建dom对象而不将它们作为文本添加到dom中。这将给你一个chan来操纵它们之前（和之后）。

$("<li />")
  .append(
    $("<a />")
     .attr("href" ,"#saved-route")
     .text(this.text))
  .click(function() {
    // your click event
  })
  .appendTo("#saved-list");

Answer 6

您可以使用live函数，这可能需要一些机制来确定哪些li项已被点击：

$("#saved-list li").live('click', function() {
    //act on click
});

Answer 7

这就是bind存在的原因。

$.each(all_objects, function(index) {{
    $("#saved-list").append("<li id='item" + index + "'><a href='#saved-route'>" + this.text + "</a></li>");
    $("#saved-list li").bind("click", function() {
        alert("Clicked on " + this.id);
    });
});

此外，这种方式很容易为每个项目创建不同的点击次数：

$("#saved-list li#item1").bind(...)
$("#saved-list li#item2").bind(...)
$("#saved-list li#item3").bind(...)

Answer 8

$.each(all_objects, function() {{
    var list_route = "<li><a href='#saved-route'>" + this.text + "</a></li>";
    var newLi = $(list_route);
    newLi.click( function(){} ).attr("id","foo");
    //if you want the a
    newLi.find("a").click( function(){} ).attr("id","foo");

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

Answer 9

.click函数将点击处理函数绑定到任何给定元素。正如您的代码中的注释所提到的，您可以使用ID或其他方法在DOM化后选择项目，但另一种方法是引用包含您要绑定的元素的变量。

示例：

var li = $('<li />');
li.click(function() { ... });

这可能有点风格，但jQuery的一个特点是它是可链接的。这意味着jQuery函数调用总是返回对jQuery本身的包装集的引用。使用可链接方面，您可以重写上述代码，如下所示：

var list = $('#saved-list'); $.each(all_objects, function(i, item) {{
    list.append(
        $('<li />')
            .append(
                $('<a />').text(item.text)
            )
            .click(function() { ... } );
    );
});

Answer 10

虽然我不知道这个$('#saved-list').refresh('listview')业务是什么，但以下可能是您正在寻找的：

var listItemEls = all_objects.map(function () {
    return $('<li id="' + this.id + '"><a href="#saved-route">' + this.text + '</a></li>')
           .click(function (e) {
               // do whatever here
           })
           .get();
});

$('#saved-list').append(listItemEls);

请注意，我们避免在最后一刻之前附加到DOM，因为附加费用很高。

正如其他海报所提到的，一般来说，使用委托点击处理程序是一种更好的方法。这看起来像

var listItemEls = all_objects.map(function () {
    return $('<li id="' + this.id + '"><a href="#saved-route">' + this.text + '</a></li>')
           .get();
});

$('#saved-list').append(listItemEls)
                .delegate("li", "click", function (e) {
                    // do stuff here.
                });

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

10 个答案: