在for循環中綁定單擊事件

Question

我正在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);    
    }); 
    } 
} 

我該在這裏做什麼？

Answer 1

嘗試改變

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

到

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

Answer 2

除了語法錯誤停止從工作當前的代碼，追加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將是無效的 - 您不能將li作爲另一個li元素的直接子元素。所有li元素都應具有父項ul或ol。