CODEWITHSUNDEEP
javascriptjqueryhtml
Wottensprels
Wottensprels

Reputation: 3327

jQuery Button handling based on a class

So i want to write a function which handles all buttons with a specific class.
Each Button should have a different action, called by the function. How do i submit the specific button to my function without having to call that function right in my html markup via onclick?

Here is my code so far:

<div id="menu" class="center">
   <ul class="menu-list center">
       <li><input type="button" value="Gruppe A" class="menu-button"></li>
       <li><input type="button" value="Gruppe B" class="menu-button"></li>
       <li><input type="button" value="Gruppe C" class="menu-button"></li>
   </ul>
</div>

$('.menu-button').click(function() {
    // here i want to check which button was clicked, for example by an ID.
});

Upvotes: 0

Views: 122

Answers (8)

Cerbrus
Cerbrus

Reputation: 72857

You can simply get the button's value like this:

$('.menu-button').click(function(){
    var value = this.value; // "Gruppe A" (Or B / C)
});

Since this refers to the DOM element that the event was activated on/from, you can access the element like you would any other DOM element.

You could then use a switch to select the right button:

$('.menu-button').click(function () {
    switch (this.value) {
        case 'Gruppe A':
            // Do something for button 1
            break;
        case 'Gruppe B':
            // Do something for button 2
            break;
        default:
            console.error('This button has not yet been implemented:', this);
    }
});

Upvotes: 1

Yogesh Sonawane
Yogesh Sonawane

Reputation: 1

Try using this:

$('.menu-button').click(function(){
    alert($(this).attr('id')) ;
});​

Upvotes: -1

Jai
Jai

Reputation: 74738

This will do if you have stactic buttons in your dom:

$('.menu-button').click(function() {
    console.log($(this).val());
});

and this will work if you have dynamically generated button list:

$(document).on('click', '.menu-button', function(){
    console.log($(this).val());
});

Upvotes: 0

James Allardice
James Allardice

Reputation: 165961

Inside the event handler, this will refer to the element that has been clicked. You can interact with it like you would any element. If it has an ID, you can access its id property:

$('.menu-button').click(function(){
    var id = this.id;
});

Note that this refers to a DOM node, not a jQuery object.

Side note

It would be much more efficient to delegate your event handler higher up the DOM tree. You can use the .on() method to do that:

$("#menu").on("click", ".menu-button", function () {
    // Do stuff
});

By doing this you only have a single copy of the event handler function in memory. By binding it to every element with the class .menu-button, you have a copy for each element.

Delegating the event handler works because most DOM events bubble up the tree from the element on which they originate. When the event reaches #menu, jQuery checks to see if it originated on an element matching the selector passed in as the 2nd argument. If it does, then the handler is executed.

Upvotes: 2

Adil
Adil

Reputation: 148110

You can use this to get DOM object or $(this) to get jQuery object, You can also use event.target to get DOM object for source of event.

Live Demo

$('.menu-button').click(function(event){
   alert(event.target.value); 
   alert(this.value);
   alert($(this).val());
});​

Upvotes: 3

Mordhak
Mordhak

Reputation: 2656

1/ You can access to the clicked item with $(this). And do lot of 'if/else' to find which item is clicked. (not the best solution)

2/ You can add .click with a better selector like $('#your-id.menu-button').click() this way you will avoid to do a lot of if/else statement to find which element has been clicked.

Upvotes: 1

nanobar
nanobar

Reputation: 66355

Try checking the button class, replace for ID with:

if(button.attr('id) == 'something')

or for the current value of the button:

if(button.val() == 'something')

..

$('.menu-button').click(function(ev) {

  var button = $(this);

  if(button.hasClass('someclassA')) {

  }
  else if(button.hasClass('someclassB')) {

  }
  else {

  }

  ev.preventDefault();
});

Upvotes: -1

s.lenders
s.lenders

Reputation: 1149

var currentId = $(this).attr('id');

Upvotes: 0

Related Questions