JQuery assign events to buttons(JQuery 将事件分配给按钮)

本文介绍了JQuery 将事件分配给按钮的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有 50 个动态生成的 HTML 按钮如下:

I have 50 dynamically generated HTML buttons as follows:

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

Which is the best way to assign click event to all buttons using jQuery?

使用 id 还是使用 name 属性?

By using id or by using name attribute ?

推荐答案

事件监听器消耗内存.您必须仔细考虑应该如何实现侦听器.

Event listeners cost memory. You have to think carefully about how you should implement the listeners.

1.直截了当的方法:

不要使用这个

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

If the behaviour for each button is the same, use a class:

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

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

If behaviour for each button is different, assign events to different #IDs

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

<强>2.使用 .on():

jQuery 1.7 引入了 .on() 方法，它将所有侦听器包装到 1 个方法中.

jQuery 1.7 introduced .on() method that wraps all listeners to 1 method.

$("button").on("click", function() {
    // Do something
});

但是，我们仍然在页面上绑定了很多监听器.

However, we are still binding many listeners on the page.

3.使用包装器(使用这个！):

用一个 div 包裹你的按钮并为它创建一个监听器.

Wrap your buttons with a div and create one listener for it.

$("#wrapper").on("click", "button", function() {
    // Do something
});

有用的资源:

  • 性能对比
  • .on()

这篇关于JQuery 将事件分配给按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！