Append<li> 元素到<ul>並為每個添加點擊事件？</ul></li>

Question

我想向<ul>添加一系列<li>元素，並以編程方式為每個元素添加一個點擊事件。

我不確定如何做到這一點，至少不是以一種簡潔的 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 .click()處理程序。 像這樣的東西：

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

您只需綁定此單擊偵聽器一次，它將適用於 ID saved-list的元素的后代的每個<li> 。

---

如果您確實想為每個<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());
});

$('#saved-list').refresh('listview'); // jquery 手機列表刷新

請注意，在委托中， this仍然指的是被點擊的li 。

Answer 4

在當前循環中（或之后）添加它還不夠嗎？

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

Answer 5

你好，jquery 中的 phil 你可以創建 dom object 而不將它們作為文本添加到 dom。 這將為您提供在添加之前（以及之后）操作它們的機會。

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

Answer 6

您可以使用live function，缺點是您可能需要一些機制來准確確定已單擊的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 function 會將點擊處理程序 function 綁定到任何給定元素。 正如您的代碼中的注釋所提到的，您可以使用 ID 或其他方式對 select 項目進行 DOM 化后，但另一種方法是簡單地引用包含您要綁定的元素的變量。

例子：

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

這可能有點風格，但 jQuery 的特點之一是它是可鏈接的。 這意味着 jQuery function 調用始終返回對 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.
                });