jQuery - passing variable to event by data

Question

I would like to create some objects dynamically and bind events to them (not important what events).

I'm passing a number to the event in order to distinguish those items. There is my code:

$('#add_btn').click(function() {
    var cont = $('#buttons');

    for(var i=0; i<5; i++) {
        var new_btn = $('<input>').attr('type', 'button').val(i);

        new_btn.click(function() {
            alert(i);
        });

        cont.append(new_btn);
    }
});

When I click on any from newly created buttons, displayed number is 5.

I think that i variable is passing by reference, but the question is: how to avoid passing variable by reference? More, even if I crate new variable before binding event (so the reference should point to another object, for example new_val = i.toString()), value is still same for all buttons (then its 4, understandable).

I know that I can attach new_btn.data() and read it in event, but I'm not sure if it won't be an overhead.

Link to jsfiddle: http://jsfiddle.net/Jner6/5/.

Famous question: Javascript closure inside loops - simple practical example. Scope... that is all. — Mr. Polywhirl
– Mr. Polywhirl, Commented Nov 5, 2013 at 11:57

Arun P Johny · Accepted Answer · 2013-11-05 11:57:58Z

2

Since you are using a closure scoped variable in a loop, inside the loop you need to create a private closure.

$('#add_btn').click(function () {
    var cont = $('#buttons');

    for (var i = 0; i < 5; i++) {
        (function (i) {
            var new_btn = $('<input>').attr('type', 'button').val(i);

            new_btn.click(function () {
                alert(i);
            });

            cont.append(new_btn);
        })(i)
    }
});

edited Nov 5, 2013 at 11:57

answered Nov 5, 2013 at 11:52

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

Comments

antyrat · Accepted Answer · 2013-11-05 11:53:33Z

0

Seems like you run into closures issue, try this:

(function( i ) {
    new_btn.click(function() {
        alert(i);
    });
})( i );

This will create immediate invoked function that will closure your variable i so you can use it in future. For now you just overriding i variable in your for-loop so you will have always same value that will equal last for-loop iteration.

answered Nov 5, 2013 at 11:53

antyrat

27.7k9 gold badges78 silver badges77 bronze badges

Comments

Roko C. Buljan · Accepted Answer · 2013-11-05 12:03:39Z

0

Don't make functions within a loop.

DEMO

var cont = $('#buttons');

$('#add_btn').click(function() {

    for(var i=0; i<5; i++) {
      $('<input>', {type:'button', value:i}).appendTo( cont );
    } 

});

cont.on('click', ':button', function() {
    alert( this.value );
});

edited Nov 5, 2013 at 12:03

answered Nov 5, 2013 at 11:57

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

Collectives™ on Stack Overflow

jQuery - passing variable to event by data

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related