JQuery/JavaScript detect index of button pressed

Question

I've got several buttons that look like:

<span class="input-group-btn">
  <a class="btn btn-default" href="#">
    <i class="fa fa-barcode"></i> Scan
  </a>
</span>

But I need to be able to detect which of the x number of buttons has been pressed. Is there any way I can do that with JQuery/JavaScript?

The buttons are created dynamically like:

$('input[role="barcode"]').before('<span class="input-group-btn"><a class="btn btn-default" href="#"><i class="fa fa-barcode"></i> Scan</a></span>')

As an alternative is it possible to give each button a different id or href to differentiate between them on creation?

you can create an counter and add it to your elemnts id attribute — Babak Fakhriloo
– Babak Fakhriloo, Commented Oct 6, 2015 at 18:48
You need delegate 'click' event to parent container of buttons. Second you need mark each button by index, you can use #id, .class, data-property. And listen on container target of event click — khusnetdinov
– khusnetdinov, Commented Oct 6, 2015 at 18:51
These are not buttons. This is a button: <button>...</button> — Conor O'Brien
– Conor O'Brien, Commented Oct 6, 2015 at 18:52

stackoverfloweth · Accepted Answer · 2015-10-06 18:51:29Z

2

try $.index();

$('.btn-default').click(function(){
    var index = $(this).parent().index();
    alert(index);
});

https://jsfiddle.net/7daffjh8/18/

answered Oct 6, 2015 at 18:51

stackoverfloweth

6,9275 gold badges44 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ryan Wheale · Accepted Answer · 2015-10-06 18:56:29Z

0

$('input[role="barcode"]').each( function(index, elem) {
  $(this).before(
     '<span class="input-group-btn">'
    +  '<a class="btn btn-default" href="#" data-index="' + index + '">'
    +    '<i class="fa fa-barcode"></i> Scan'
    +  '</a>'
    + '</span>'
  );
});

$(document).on('click', 'a.btn', function () {
  console.log('You clicked on link with index', this.getAttribute("data-index"));
});

answered Oct 6, 2015 at 18:56

Ryan Wheale

28.7k11 gold badges87 silver badges105 bronze badges

Comments

Sukrit Gupta · Accepted Answer · 2015-10-06 19:00:10Z

0

You can use the other described JQUERY methods OR

You can yourself give a manual number to button while creating like

<span class="input-group-btn">
  <a class="btn btn-default" index="1" href="#">
    <i class="fa fa-barcode"></i> Scan
  </a>
</span>

OR Using JS like

for(i=0 to n){
  var l_button = document.createElement("Button");
  l_button.setAttribute("index",i);
}

And when you want to retrieve the index you can do like:

var target = event.target || event.srcElement;
var index_val = target.getAttribute("index");

answered Oct 6, 2015 at 19:00

Sukrit Gupta

4485 silver badges18 bronze badges

Comments

Søren · Accepted Answer · 2015-11-27 09:22:32Z

0

You can detect which button was clicked in the event handler:

$('.input-group-btn').click(function(e){
    var index = $(e.target).index();
    console.log(index);
});

edited Nov 27, 2015 at 9:22

answered Oct 6, 2015 at 18:57

Søren

24.1k8 gold badges55 silver badges39 bronze badges

1 Comment

Andreas Louv Over a year ago

e.target returns a dom node not a jQuery object. See api.jquery.com/event.target

Collectives™ on Stack Overflow

JQuery/JavaScript detect index of button pressed

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related