Отримати натиснутий елемент за допомогою jQuery на події?

84

Я використовую наступний код для виявлення натискання кнопки, що динамічно генерується.

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

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

Наприклад:

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

— Адвокат диявола
джерело

114

Як не можна просто

Використовуйте і $(this)тут

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

— біпен
джерело

Схоже, я маю справу з проблемою кешування з сервера. Вибачте.

— Адвокат диявола

53

Попередження тим, хто використовує ES6. Функції зі стрілками не встановлюють "це", тому це буде батьком. Отже, в основному не використовуйте тут функцію стрілки.

— Томас-Пітер

4

@ thomas-peter Я кажу, ти перетворюєш це на відповідь

— Джек

2

@ thomas-peter Врятував мені ще десятки хвилин розчарувань, дякую.

— Мілан Велебіт

1

@ thomas-peter ти мене щойно врятував! я намагався зрозуміти, чому це не прокинулось приблизно 30 хвилин ... Дякую!

— kriskotoo BG

53

У вашій функції відсутній параметр події.

$(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>

— ямнонсо
джерело