JQuery 将事件分配给按钮

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 为所有按钮分配点击事件的最佳方法是什么？

通过使用id还是使用name属性？

Answer 1

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

1. 直截了当的方法：

不要使用这个

如果每个按钮的行为相同，请使用一个类：

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

如果每个按钮的行为不同，请将事件分配给不同的 #IDs

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

有用的资源：

• 性能比较
• .on（）

Answer 2

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

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

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

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

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

Answer 3

如果您

的所有按钮都在容器内，并且您希望所有按钮都使用相同的函数，则将单击处理程序添加到容器中

演示

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

这是一种简单的方法，可以将所有内容包装成一个"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 5

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

：

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

关键是要足够具体，您不必指定每个选择器，但不要太丢失，因为页面上可能还有其他按钮等您不想包含。

更新了代码以包含委派。

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

等等...