Question

我有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将click事件分配给所有按钮的最佳方法是什么？

使用id或使用name属性？

Answer 1

事件监听器会耗费内存。您必须仔细考虑如何实现侦听器。

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

有用的资源：

Answer 2

最好的方法是委托给周围的容器，这样你只有一个监听器而不是50个。使用.on()

https://api.jquery.com/on/

如果你必须分配给每个按钮，找出一种只写一个选择器的方法，如下所示：

$('button').click(function(){});

请注意，您的选择器可能需要更具体地定位这些50个按钮，正如@Drewness在评论中指出的那样。

Answer 3

我会将它应用于按钮的父元素。因此，如果所有按钮都在<div id="myButtons">：

$('#myButtons').on('click', 'button' function () {
    // Do stuff...
});

关键是要具体到足以让您不必指定每个选择器但不会因为不<<页面上的其他按钮等而丢失/ em>想要包含。

更新了包含委托的代码。

Answer 4

如果您拥有容器内的所有按钮，并且您希望所有人都使用相同的功能，则将点击处理程序添加到容器中

<强> DEMO

$("#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>

Answer 5

这将是一个简单的方法将它全部包装成一个'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;
});

这是一个小提琴http://jsfiddle.net/gisheri/CW474/1/

Answer 6

我认为如果你为所有人使用一个公共类名并按该类名处理点击事件会更好。

$('.classname').click(function(){
    //`enter code here`
});

或者您可以按标签名称处理事件：

$('button').click(function(){
    //'enter code here'
});

此方法可能会影响其他按钮的功能，这些按钮不包含在50个按钮组中。

Answer 7

尝试

$(".btn").click(function() {
    // Do something
});

Answer 8

您可以使用以下代码：

 $("#btn1").on("click",function(){
      // Your code
 });

 $("#btn2").on("click",function(){
      // Your code
 });

依旧......

JQuery将事件分配给按钮

8 个答案: