Получить нажатый элемент с помощью jQuery при событии?

85

Я использую следующий код, чтобы определить, когда нажимается динамически созданная кнопка.

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

Обычно, если вы только что сделали, $('.appDetails').click()вы могли бы использовать, $(this)чтобы получить элемент, на который щелкнули. Как мне добиться этого с помощью приведенного выше кода?

Например:

$(document).on("click",".appDetails", function () {
    var clickedBtnID = ??????
    alert('you clicked on button #' + clickedBtnID);
});
jquery event-handling click jquery-events Адвокат дьявола
источник

Ответы:

115

Настолько просто, насколько это возможно

Используйте и $(this)здесь

$(document).on("click",".appDetails", function () {
   var clickedBtnID = $(this).attr('id'); // or var clickedBtnID = this.id
   alert('you clicked on button #' + clickedBtnID);
});
бипен
источник
1
Похоже, я столкнулся с проблемой кеширования на сервере. Сожалею.
Devil's Advocate
55
Предупреждение для тех, кто использует ES6. Стрелочные функции не устанавливают this, поэтому this будет родительским. Итак, в основном не используйте здесь стрелочную функцию.
thomas-peter
4
@ thomas-peter Я говорю, вы превратите это в ответ
Джек
2
@ thomas-peter Сэкономил мне еще несколько десятков минут разочарования, спасибо.
Милан Велебит
1
@ thomas-peter, ты только что спас меня! Я пытался понять, почему он не просыпался минут 30 ... Спасибо!
kriskotoo BG
54

Вам не хватает параметра события в вашей функции.

$(document).on("click",".appDetails", function (event) {
    alert(event.target.id);
});
Бастиан Ранг
источник
6
Это было идеально для меня. Он дает элемент, который был нажат - $ (this) предоставил только элемент, к которому было прикреплено событие.
Билл Тарбелл
Это идеальный метод. Спасибо :)
Swetabja Hazra
34

Обычный способ справиться с этим не очень хорошо работает с ES6. Вместо этого вы можете сделать это:

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

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

Обратите внимание, что целью события будет выбранный элемент, который может быть не тем элементом, который вам нужен (это может быть дочерний элемент, получивший событие). Чтобы получить фактический элемент:

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

  this.delete(targetElement.data('id'));
});
вафло
источник
0

Самый простой способ - передать атрибут данных в ваш HTML-тег.

Пример:

<div data-id='tagid' class="clickElem"></div>

<script>
$(document).on("click",".appDetails", function () {
   var clickedBtnID = $(this).attr('data');
   alert('you clicked on button #' + clickedBtnID);
});
</script>
ямнонсо
источник