Zostaniesz kliknięty element za pomocą jQuery na wydarzeniu?

85

Używam następującego kodu, aby wykryć kliknięcie przycisku generowanego dynamicznie.

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

Zwykle, jeśli właśnie to zrobiłeś, $('.appDetails').click()możesz użyć $(this)do pobrania klikniętego elementu. Jak mógłbym to osiągnąć za pomocą powyższego kodu?

Na przykład:

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

— Adwokat diabła
źródło

115

Tak proste, jak to tylko możliwe

Użyj $(this)również tutaj

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

— bipen
źródło

1

Wygląda na to, że mam do czynienia z problemem buforowania na serwerze. Przepraszam.

— Devil's Advocate

55

Ostrzeżenie dla osób używających ES6. Funkcje strzałkowe nie ustawiają „tego”, więc będzie to element nadrzędny. Więc zasadniczo nie używaj tutaj funkcji strzałkowej.

— thomas-peter

4

@ thomas-peter Mówię, że zamieniasz to w odpowiedź

— Jack

2

@ thomas-peter zaoszczędził mi dziesiątki minut frustracji, dziękuję.

— Mediolan Velebit

1

@ thomas-peter właśnie mnie uratowałeś! Próbowałem dowiedzieć się, dlaczego nie budził się przez jakieś 30 minut ... Dziękuję!

— kriskotoo BG

54

W funkcji brakuje parametru zdarzenia.

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

— Bastian Rang
źródło

6

To było dla mnie idealne. Daje element, który został kliknięty - $ (this) dał tylko element, do którego zostało dołączone zdarzenie.

— Bill Tarbell

To jest doskonała metoda. Dzięki :)

— Swetabja Hazra

34

Konwencjonalny sposób radzenia sobie z tym nie sprawdza się w ES6. Możesz to zrobić zamiast tego:

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

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

Zwróć uwagę, że celem zdarzenia będzie kliknięty element, który może nie być żądanym elementem (może to być element podrzędny, który odebrał zdarzenie). Aby uzyskać rzeczywisty element:

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

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

— wafel
źródło

0

Prostym sposobem jest przekazanie atrybutu danych do tagu HTML.

Przykład:

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

— iamnonso
źródło