0

我正在 for 循环中创建一个无序列表和一个按钮。我想为同一个for循环中的按钮绑定一个点击功能。

尝试使用连接选项。它不工作。

function displayFeeds(items){
    var ul = $('#listview');
    for (var i = 0; i < items.length; i++) {
         var li = $('<li/>').html(items[i].DeviceNames);
         li.append($('<li/>').html(items[i].DeviceQuantity));
         li .append('<input type="button" value="Add" id="'+i+'">');
         // Enhance new button element
        li.append($('<hr>')); 
         ul.append(li); 


    $('#"+i+"').bind('click', function () {             
        console.log("called");
        var clickedID = this.id;
        console.log(clickedID);
        UpdateDeviceDetails(clickedID);             
    });
    }
}

我应该在这里做什么？

4

2 回答 2

1

尝试改变

$('#"+i+"').bind('click', function () {

至

$('#'+i).bind('click', function () {
于 2013-09-23T10:18:25.623 回答
1

除了阻止当前代码工作的语法错误之外，x在循环中附加点击处理程序的数量会相对较慢。更好的解决方案是将委托事件附加到单个共享父元素。尝试这个：

function displayFeeds(items){
    var ul = $('#listview');
    for (var i = 0; i < items.length; i++) {
        var li = $('<li/>').html(items[i].DeviceNames);
        li.append($('<li/>').html(items[i].DeviceQuantity));
        li.append('<input type="button" value="Add" class="add-input" />');
        li.append($('<hr>')); 
        ul.append(li); 
    }
}

// single event handler...
$('#listview').on('click', '.add-input', function() {
    UpdateDeviceDetails(this.id);             
});

您甚至可以通过将引用传递UpdateDevideDetails给click处理程序来简化它，如下所示：

$('#listview').on('click', '.add-input', UpdateDeviceDetails);

var UpdateDeviceDetails = function(el) {
    var id = el.id;
    // rest of your logic...
}

另请注意，您的 jQuery 生成的 HTML 将无效 - 您不能将 anli作为另一个元素的直接子li元素。所有li元素都应该有一个父元素ul或ol.

于 2013-09-23T10:22:06.973 回答