Связывание событий кликов в цикле for

Question

Связывание событий кликов в цикле for

0

Я создаю неупорядоченный список и кнопку в цикле 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);             
    });
    }
}

Что мне здесь делать?

Ash 23 сен. 2013, в 12:59

Источник

Теги:

javascript

jquery

html

2 ответа

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...
}

Также обратите внимание, что HTML, сгенерированный вашим jQuery, будет недействительным - вы не можете иметь li как прямой дочерний элемент другого элемента li. Все элементы li должны иметь родительскую ul или ol.

Rory McCrossan 23 сен. 2013, в 08:06

0

Большое спасибо за ваш ответ. Мне нужно, чтобы ID передавался параметру UpdateDeviceDetails (). Значение идентификатора должно быть как 0..1 .. (т.е. значение i из цикла for).
Ash 23 сен. 2013, в 11:00
0

@ Все методы в моем ответе сделают это.
Rory McCrossan 23 сен. 2013, в 11:02

Ещё вопросы

Большое спасибо за ваш ответ. Мне нужно, чтобы ID передавался параметру UpdateDeviceDetails (). Значение идентификатора должно быть как 0..1 .. (т.е. значение i из цикла for).
@ Все методы в моем ответе сделают это.

iJade · Accepted Answer · 2013-09-23T07-47-00.000Z

Попробуйте изменить

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

в

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

Оно работало завораживающе. Большое спасибо!!!
рад, что это помогло Эшу и пометить его как ответ :)