如何在不同的按钮上绑定功能？ [复制]答案

【问题标题】：How to bind function on different buttons? [duplicate]如何在不同的按钮上绑定功能？ [复制]
【发布时间】：2012-11-07 07:21:31
【问题描述】：

我尝试在我的按钮上绑定警报：

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

这是我的html代码：

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

但我在所有按钮上都得到 4。如何修复它以获得正确的警报值？（1、2、3等）

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

【问题讨论】：

标签： javascript jquery

【解决方案1】：

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

注意你使用.live是错误的，重点不是单独绑定到每个元素，而是要弄清楚每个元素有什么共同点并使用那个选择器：

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

【讨论】：

【解决方案2】：

简单：

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

小提琴：http://jsfiddle.net/rzpXK/

【讨论】：

【解决方案3】：

使用 this.id，因为当循环结束时，我将获得最后一个打破循环的值。

Live Demo

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

最好给所有按钮一个通用类，并使用该类来绑定事件。

<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 已被弃用，你最好使用on

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

【讨论】：

好的，但是不使用按钮的id怎么绑定呢？
为所有按钮提供一些通用类 $('.someclas').live('click', function(){ alert(i); });

【解决方案4】：

有很多事情（尽管本身错误）不是很好的做法。

元素的id 不应以数字开头
.live() 已弃用，应避免使用。应该改用.on()
.live() 或 .on() 不应像这样在循环中绑定。它们应该一次性完成，并尽可能使用单个选择器。
如果您希望将同一个事件绑定到多个元素，则为所有按钮使用通用 class 会更好

试试

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

【讨论】：