Binding click events in a for loop

Question

I am creating a unordered list and a button in the for loop. I want to bind a click function for the buttons in the same for loop.

Tried with the concatenating option. It`s not working.

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);             
    });
    }
}

What should I do here?

Have a look at this question Javascript closure inside loops - simple practical example — Alberto Zaccagni
– Alberto Zaccagni, Commented Sep 23, 2013 at 10:17

iJade · Accepted Answer · 2013-09-23 10:18:25Z

1

Try changing

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

to

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

answered Sep 23, 2013 at 10:18

iJade

23.9k58 gold badges163 silver badges251 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rory McCrossan · Accepted Answer · 2013-09-23 10:22:06Z

1

Aside from the syntax error stopping your current code from working, appending x number of click handlers in a loop will be relatively slow. A better solution is to attach a delegate event to a single shared parent element. Try this:

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);             
});

You could even simplify that by just passing the reference of UpdateDevideDetails to the click handler, something like this:

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

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

Also note that the HTML generated by your jQuery will be invalid - you cannot have an li as a direct child of another li element. All li elements should have a parent ul or ol.

answered Sep 23, 2013 at 10:22

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

2 Comments

Ash Over a year ago

Thanks much for ur response. I need ID to be passed to the parameter of the UpdateDeviceDetails(). The value of the ID should be like 0..1.. (i.e the value of i from the for loop).

Rory McCrossan Over a year ago

@Ash all the methods in my answer will do that.

Collectives™ on Stack Overflow

Binding click events in a for loop

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related