I have a PHP script that throws out a bunch of buttons (Format in case it is needed):

<a class="ClassInfo" id="id">Name</a>

The file is retrieved dynamically and there can be as many buttons as possible, maybe none, and maybe a million (unlikely though).

I need to use JavaScript for this and can't just redirect the user to another website (mostly because the operation is repeated heavily and gets EXTREMELY tedious.).

Is it possible for me to use some bination of JavaScript + jQuery to detect which button was pressed and do an operation appropriately?

Example of what I am hoping for is this:

• User clicks one of the buttons (which has its unique id number).
• JavaScript detects which button was clicked (I can't just use fixed code as the number of buttons and the ids can change whenever they feel like it)
• JavaScript send out an Ajax request and does some fancy operations (I have this part covered)

Now is it possible for me to detect which button was clicked?

I have a PHP script that throws out a bunch of buttons (Format in case it is needed):

<a class="ClassInfo" id="id">Name</a>

The file is retrieved dynamically and there can be as many buttons as possible, maybe none, and maybe a million (unlikely though).

I need to use JavaScript for this and can't just redirect the user to another website (mostly because the operation is repeated heavily and gets EXTREMELY tedious.).

Is it possible for me to use some bination of JavaScript + jQuery to detect which button was pressed and do an operation appropriately?

Example of what I am hoping for is this:

• User clicks one of the buttons (which has its unique id number).
• JavaScript detects which button was clicked (I can't just use fixed code as the number of buttons and the ids can change whenever they feel like it)
• JavaScript send out an Ajax request and does some fancy operations (I have this part covered)

Now is it possible for me to detect which button was clicked?

• javascript
• jquery

• @TheBronx — Given the question is tagged jQuery, and says "javascript + jquery", I'm guessing: Yes. – Quentin Commented May 2, 2013 at 16:30
• @TheBronx jquery tagged! – A. Wolff Commented May 2, 2013 at 16:30
• 1 sorry but when I came there was just one tag: javascript – Salvatorelab Commented May 2, 2013 at 16:31
• 1 When you say "the number of buttons and the ids can change whenever they feel like it" do you mean that the buttons may change dynamically during a single viewing session or simply that each time you load the page buttons may be different? If you need to attach listeners to buttons that get added after load-time, you need to use event delegation (e.g., with the 3-argument variant of on). – apsillers Commented May 2, 2013 at 16:40

4 Answers 4

The target property of the event object will tell you which element was clicked on.

document.addEventListener('click', function (e) {
  var target = e.target;
  if (target.tagName && target.tagName.toLowerCase() == "a") {
    alert(target.id);
  }
});

See a live demo

For a jQuery solution you can add a click event listener to your element a.ClassInfo:

$('a.ClassInfo').click(function(event) {
    alert(this.id);
});

// ES6
$('a.ClassInfo').click(event => alert(this.id));

Or better yet, use event bubbling to your advantage with .on

$(document).on('click', 'a.ClassInfo', function(event) {
    alert(this.id);
});

// ES6
$(document).on('click', 'a.ClassInfo', event => alert(this.id));

Event bubbling is very useful if you dynamically generate HTML. It avoids having to bind/rebind event listeners to elements when they're added to or removed from the DOM if you bind to a lower level element (in this case document).

Assuming the links in question all have the same class (or a known list of classes), and that you can use jQuery:

$('a.ClassInfo').on('click',
  function(event) {
    event.preventDefault();

    var id = this.id;

    console.log('ClassInfo ' + id + ' was clicked');

    // continue with Ajax from here
  }
);

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a class="ClassInfo" id="id1">Name 1</a> -
<a class="ClassInfo" id="id2">Name 2</a> -
<a class="ClassInfo" id="id3">Name 3</a>

You can try something like this;

$( ":button, :submit" ).click(function(){
    var id = $(this).attr('id');
    alert('Call post for:'+id);
  });

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="t1">T1</button>
<input type='button' value='T2' id='T2' />
<input type='submit' value='T3' id='T3' />