JQuery assign events to buttons

问题:

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" />

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

By using id or by using name attribute ?

回答1:

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

1. The straightforward way:

Do not use this

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

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

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

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

2. Use .on():

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. Use a wrapper (use this!):

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

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

Useful resources:

• Performance comparison
• .on()

回答2:

Best way would be to delegate to the surrounding container, that way you only have one listener rather than 50. Use .on()

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

If you must assign to each button, figure out a way to write only one selector, like this:

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

Note your selector may need to be more specific to target just these 50 buttons, as @Drewness points out in the comments.

回答3:

if you have all the buttons inside of a container and you want the same function for all add the click handler to the container

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>

回答4:

This would be an easy way to wrap it all up into one 'on' event and do something based on the button 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;
});

here's a fiddle http://jsfiddle.net/gisheri/CW474/1/

回答5:

I would apply it to the parent element of the buttons. So if all of the buttons were in <div id="myButtons">:

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

The key is to be specific enough that you do not have to specify each selector but not too lose as there may be other buttons, etc. on the page that you do not want to include.

Updated code to include delegation.

回答6:

I think it will be better if you use a common class name for all and handle click event by that class name.

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

Or you can handle event by tag name:

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

This method might effect the function of other buttons which are not included in the group of 50 buttons.

回答7:

Try

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

回答8:

You can use following code:

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

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

and so on...