CODEWITHSUNDEEP
javascriptjquery
ahmd0
ahmd0

Reputation: 17293

JQuery single click event on a group of buttons

I'm using the following JQuery code to trap clicks on a single button:

$(function () {

    //Set up click event on the Remove button
    $('#ButtonRemove').click(function (event) {
    //Process button click event
    }
}

where the HTML itself is this:

<input type="submit" name="ButtonRemove" value="Remove Now" id="ButtonRemove" />

But one of my pages is generated dynamically, which means that it can have a variable number of Remove Now buttons, each having the following HTML:

<input type="submit" name="ButtonRemove_01" value="Remove Now" id="ButtonRemove_01" />
<input type="submit" name="ButtonRemove_02" value="Remove Now" id="ButtonRemove_02" />
...
and so on

So can I adjust my JQuery statement to catch all those buttons in one method?

EDIT: Wow. Thank you everyone! There're so many ways to do it. JQuery is very handy!

Upvotes: 2

Views: 8743

Answers (4)

Christophe
Christophe

Reputation: 28114

Sure! Use the jQuery on() method with delegation:

html:

<div id="Buttons">
<input type="submit" name="ButtonRemove_01" value="Remove Now" id="ButtonRemove_01" />
<input type="submit" name="ButtonRemove_02" value="Remove Now" id="ButtonRemove_02" />
</div>

Script:

$("#Buttons").on("click","input",function(event){
  $(this)...
});

You can also use more specific selectors, for example "input[id^='ButtonRemove_']" will target all the button whose id starts with ButtonRemove_

Upvotes: 5

PSL
PSL

Reputation: 123739

Use classname for the buttons so that you jquery selctor selects and applies the event to all matching the className.

Js

$(function () {

    //Set up click event on the Remove button
    $('.btnRemove').click(function (event) {
    //Process button click event
    alert(this.id);
    }
});

Html

<input type="submit" class="btnRemove" name="ButtonRemove_01" value="Remove Now" id="ButtonRemove_01" />
<input type="submit" class="btnRemove" name="ButtonRemove_02" value="Remove Now" id="ButtonRemove_02" />

And if these are part of dynamic generated content on the page using JS then you can use event delegation using on so that dynamically created buttons with this classname gets the event delegated from the parent or document. I have mentioned document here but use the element that exists in DOM already which is the container.

    //Set up click event on the Remove button
    $(document).on('click', '.btnRemove' ,function (event) {
    //Process button click event
       alert(this.id);
    });

or

$(function () {
$('contanerSelector').on('click', '.btnRemove' ,function (event) {
        //Process button click event
          alert(this.id);
        });
});

Upvotes: 5

Starx
Starx

Reputation: 78971

There are several ways. If you want to catch event for all submit buttons.

$(":submit").on("click", function() {
 // Carry on
});

But it seems like you are trying to select element that start with ButtonRemove. So

$("[name^='ButtonRemove']").on("click", function() {
    // This function will apply on the elements whose name start with "ButtonRemove"
});

Upvotes: 1

Anoop
Anoop

Reputation: 23208

Give each button same class or use type 'submmit'

<input type="submit" name="ButtonRemove_01" class='classname' value="Remove Now" id="ButtonRemove_01" />
<input type="submit" name="ButtonRemove_02" class='classname' value="Remove Now" id="ButtonRemove_02" />
...

JS using class

$(".classname").click(function(){

  ///your code
});

JS using type

$("input:submit").click(function(){

  ///your code
});

Upvotes: 1

Related Questions