How to bind function on different buttons?

Question

I tried to bind alert on my buttons:

for(var i=1; i<=3; i++){
   $('#' + i).live('click', function(){
       alert(i);
   });
};

It is my html code:

<input id="1" type="button" value="one">
<input id="2" type="button" value="two">
<input id="3" type="button" value="three">

But I get 4 on all buttons. How to fix it to get correctly alert values? (1, 2, 3 and etc..)

http://jsfiddle.net/sergey1986/UFjsM/

score 2 · Accepted Answer · answered Nov 07 '12 at 07:24

for (var i = 1; i <= 3; i++) {
    $('#' + i).live('click', function(i) {
        return function() {
            alert(i);
        };
    }(i));
}

Note that you are using .live wrong, the point is not to bind to each element individually, but to figure out what each element have in common and use that selector:

$("input[type=button]").live(function() {
    alert(this.id);
});

Adil · Answer 2 · 2012-11-07T07:29:17.957

1

Use this.id, as when loop is finished i will have the last value which break the loop.

Live Demo

for(var i=1; i<=3; i++){
   $('#' + i).live('click', function(){
       alert(this.id);
   });
};

Its better to give some common class to all the button and use that class to bind the event.

<input id="1" type="button" value="one" class="someclass">
<input id="2" type="button" value="two" class="someclass">
<input id="3" type="button" value="three" class="someclass">

$('.someclass').live('click', function(){
   alert(this.id);
});

live is deprecated you better use on

$('.someclass').on('click', function(){
   alert(this.id);
});

edited Nov 07 '12 at 07:29

answered Nov 07 '12 at 07:22

Adil

146,340
25
209
204

Ok, but how to bind without use of id of button? – Sergey Nov 07 '12 at 07:24
give some common class to all buttons $('.someclas').live('click', function(){ alert(i); }); – Adil Nov 07 '12 at 07:26

score 1 · Answer 3 · answered Nov 07 '12 at 07:24

1

Simple:

for(var i=1; i<=3; i++){
   $('#' + i).live('click', function(){
       alert(this.id);
   });
}

Fiddle: http://jsfiddle.net/rzpXK/

answered Nov 07 '12 at 07:24

Praveen Kumar Purushothaman

164,888
24
203
252

Abhilash · Answer 4 · 2012-11-07T07:30:54.463

There are a lot of things that are (although not wrong per se) not very good practices.

An element's id should not begin with numbers
.live() is deprecated and should be avoided. .on() should be used instead
.live() or .on() should not be bound like that in a loop. They should be done in one shot, using a single selector where possible.
Use of a common class for all your buttons is a better idea if you want the same event to be bound to multiple elements

Try

$('input[type=button]').on('click', function(){
   alert( this.id );
})

How to bind function on different buttons?

4 Answers4

Simple:

Fiddle: http://jsfiddle.net/rzpXK/