Get clicked element using jQuery on event?

Question

I'm using the following code to detect when a dynamically generated button is clicked.

$(document).on("click",".appDetails", function () {
    alert("test");
});

Normally, if you just did $('.appDetails').click() you could use $(this) to get the element that was clicked on. How would I accomplish this with the above code?

For instance:

$(document).on("click",".appDetails", function () {
    var clickedBtnID = ??????
    alert('you clicked on button #' + clickedBtnID);
});

Solution 1

As simple as it can be

Use $(this) here too

$(document).on("click",".appDetails", function () {
   var clickedBtnID = $(this).attr('id'); // or var clickedBtnID = this.id
   alert('you clicked on button #' + clickedBtnID);
});

Solution 2

You are missing the event parameter on your function.

$(document).on("click",".appDetails", function (event) {
    alert(event.target.id);
});

Solution 3

The conventional way of handling this doesn't play well with ES6. You can do this instead:

$('.delete').on('click', event => {
  const clickedElement = $(event.target);

  this.delete(clickedElement.data('id'));
});

Note that the event target will be the clicked element, which may not be the element you want (it could be a child that received the event). To get the actual element:

$('.delete').on('click', event => {
  const clickedElement = $(event.target);
  const targetElement = clickedElement.closest('.delete');

  this.delete(targetElement.data('id'));
});

Solution 4

There are many ways you can do that

The first method is by using the javascript target

$(document).on("click",".appDetails", function (event) {
    var clickebtn = target.event.id;
});

View more solutions

Comments

[THE JOATMON]

Looks like I'm dealing with a caching issue from the server. Sorry.

[Bill Tarbell]

This was perfect for me. It gives the element that was clicked - $(this) only gave the element that had the event attached.

[thomas-peter]

A warning to those using ES6. Arrow functions do not set 'this' so this will be the parent. So, basically don't use an arrow function here.

[Jack]

@thomas-peter I say you turn that into an answer

[Milan Velebit]

@thomas-peter Saved me more dozens of minutes of frustration, thank you.

[kriskotoo BG]

@thomas-peter you just saved me! i was trying to figure out why it wasn't woking for like 30 minutes... Thank you!

[Mark Baijens]

You should use event.currentTarget to get the element the event is bound to. event.target is indeed the element that triggered the event. Your code clickedElement.closest('.delete'); could fail if you have multiple nested elements with this class.

[Theepag]

What is .appDetails here?