Я создаю неупорядоченный список и кнопку в цикле 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);
});
}
}
Что мне здесь делать?
Попробуйте изменить
$('#"+i+"').bind('click', function () {
в
$('#'+i).bind('click', function () {
Помимо синтаксической ошибки, останавливающей ваш текущий код от работы, добавление 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...
}
Также обратите внимание, что HTML, сгенерированный вашим jQuery, будет недействительным - вы не можете иметь li
как прямой дочерний элемент другого элемента li
. Все элементы li
должны иметь родительскую ul
или ol
.