CODEWITHSUNDEEP
javascriptjqueryonclickonclicklistenerbuttonclick
user3191903
user3191903

Reputation: 245

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 ?

Upvotes: 4

Views: 4470

Answers (8)

Maria
Maria

Reputation: 149

Try

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

Upvotes: 0

RamGrg
RamGrg

Reputation: 297

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.

Upvotes: 1

Drewness
Drewness

Reputation: 5072

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.

Upvotes: 1

Gisheri
Gisheri

Reputation: 1715

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/

Upvotes: 1

martynas
martynas

Reputation: 12300

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:

Upvotes: 9

Juan
Juan

Reputation: 5050

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>

Upvotes: 1

Willy
Willy

Reputation: 1075

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.

Upvotes: 2

Ayyaz Zafar
Ayyaz Zafar

Reputation: 2163

You can use following code:

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

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

and so on...

Upvotes: -4

Related Questions