Получить нажатый элемент с помощью 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);
});

— Адвокат дьявола
источник

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>

— ямнонсо
источник