2

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 combination 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?

Improve this question
4
  • @TheBronx — Given the question is tagged jQuery, and says "javascript + jquery", I'm guessing: Yes. Commented May 2, 2013 at 16:30
  • @TheBronx jquery tagged! Commented May 2, 2013 at 16:30
  • 1
    sorry but when I came there was just one tag: javascript 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). Commented May 2, 2013 at 16:40

4 Answers 4

Reset to default
5

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

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

Comments

3

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).

Improve this answer

3 Comments

would be even better with a.ClassInfo in the selector
I realize this is an old answer, but when I alert this.id, it shows empty. Any help?
Nevermind, I am quite the fool, I placed my id in the wrong place, so of course, it was empty, thank you for the slick answer!
2

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.com/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>

Improve this answer

Comments

0

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.com/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' />

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.