我有 50 个动态生成的 HTML 按钮如下：
<input type="button" id="btn1" name="myButton" value="Click Me" />
<input type="button" id="btn2" name="myButton" value="Click Me" />
:
:
:
<input type="button" id="btn50" name="myButton" value="Click Me" />
使用 jQuery 将点击事件分配给所有按钮的最佳方法是什么？
使用id 还是使用name 属性？
【问题讨论】：
标签： javascript jquery onclick onclicklistener buttonclick
最好的方法是委托给周围的容器，这样你就只有一个侦听器而不是 50 个。使用.on()
如果你必须为每个按钮分配，想办法只写一个选择器，像这样：
$('button').click(function(){});
请注意，您的选择器可能需要更具体地针对这 50 个按钮，正如 @Drewness 在 cmets 中指出的那样。
【讨论】：
$('button')的唯一问题是页面上可能有其他按钮不适用。
您可以使用以下代码：
$("#btn1").on("click",function(){
// Your code
});
$("#btn2").on("click",function(){
// Your code
});
等等……
【讨论】：
事件侦听器会消耗内存。您必须仔细考虑应该如何实现侦听器。
1.直截了当的方法：
不要使用这个
如果每个按钮的行为相同，请使用类：
$(".btn").click(function() {
// Do something
});
如果每个按钮的行为不同，则将事件分配给不同的#ID
$("#btn1").click(function {
// Do something
});
2。使用 .on()：
jQuery 1.7 引入了 .on() 方法，它将所有侦听器包装到 1 个方法中。
$("button").on("click", function() {
// Do something
});
但是，我们仍然在页面上绑定了很多监听器。
3.使用包装器（使用这个！）：
用一个 div 包裹你的按钮并为它创建一个监听器。
$("#wrapper").on("click", "button", function() {
// Do something
});
有用的资源：
【讨论】：
我会将其应用于按钮的父元素。所以如果所有的按钮都在<div id="myButtons">:
$('#myButtons').on('click', 'button' function () {
// Do stuff...
});
关键是要足够具体，您不必指定每个选择器但不要太丢失，因为您所做的页面上可能还有其他按钮等不 想要包含。
更新代码以包含委托。
【讨论】：
如果你有一个容器内的所有按钮，并且你希望所有的按钮都具有相同的功能，则将点击处理程序添加到容器中
$("#container").on("click", function(e){
if(e.target.type =="button")
{
alert(e.target.id);
}
});
<div id="container">
<input type="button" id="test1" value="button1"/>
<input type="button" id="test2" value="button2"/>
<input type="button" id="test3" value="button3"/>
<input type="button" id="test4" value="button4"/>
<input type="button" id="test5" value="button5"/>
<input type="button" id="test6" value="button6"/>
something
<input type="text"/>
</div>
【讨论】：
这将是一种简单的方法，可以将其全部封装到一个“on”事件中并根据按钮 ID 执行某些操作；
<button id='button1'>button 1</button>
<button id='button2'>button 2</button>
<button id='button3'>button 3</button>
var mybuttons = $('#button1');
for(i=1;i<3;i++){
mybuttons = mybuttons.add($('#button'+i));
}
console.log(mybuttons);
mybuttons.on('click', function(){
var myid = $(this).attr("id");
console.log(myid);
//use a switch or do whatever you want with the button based on the id;
});
【讨论】：
我认为如果你对所有人使用一个通用的类名并通过该类名处理点击事件会更好。
$('.classname').click(function(){
//`enter code here`
});
或者你可以通过标签名来处理事件：
$('button').click(function(){
//'enter code here'
});
此方法可能会影响不属于 50 个按钮组的其他按钮的功能。
【讨论】：
试试
$(".btn").click(function() {
// Do something
});
【讨论】：