Mit jQuery auf Ereignis geklicktes Element erhalten?

85

Ich verwende den folgenden Code, um zu erkennen, wann auf eine dynamisch generierte Schaltfläche geklickt wird.

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

Wenn Sie dies nur getan haben, können $('.appDetails').click()Sie normalerweise $(this)das Element abrufen, auf das geklickt wurde. Wie würde ich dies mit dem obigen Code erreichen?

Zum Beispiel:

$(document).on("click",".appDetails", function () {
    var clickedBtnID = ??????
    alert('you clicked on button #' + clickedBtnID);
});
jquery event-handling click jquery-events Des Teufels Anwalt
quelle

Antworten:

114

So einfach wie es nur geht

Verwenden Sie auch $(this)hier

$(document).on("click",".appDetails", function () {
   var clickedBtnID = $(this).attr('id'); // or var clickedBtnID = this.id
   alert('you clicked on button #' + clickedBtnID);
});
Bipen
quelle
1
Es sieht so aus, als hätte ich ein Caching-Problem vom Server. Es tut uns leid.
Devil's Advocate
54
Eine Warnung für Benutzer von ES6. Pfeilfunktionen setzen 'this' nicht, daher ist dies das übergeordnete Element. Verwenden Sie hier also grundsätzlich keine Pfeilfunktion.
Thomas-Peter
4
@ Thomas-Peter Ich sage, Sie machen das zu einer Antwort
Jack
2
@ thomas-peter Hat mir noch Dutzende Minuten Frustration erspart, danke.
Milan Velebit
1
@ thomas-peter du hast mich gerade gerettet! Ich habe versucht herauszufinden, warum es 30 Minuten lang nicht aufgewacht ist ... Danke!
kriskotoo BG
54

Sie vermissen den Ereignisparameter in Ihrer Funktion.

$(document).on("click",".appDetails", function (event) {
    alert(event.target.id);
});
Bastian Rang
quelle
6
Das war perfekt für mich. Es gibt das Element an, auf das geklickt wurde - $ (this) gab nur das Element an, an das das Ereignis angehängt war.
Bill Tarbell
Dies ist die perfekte Methode. Danke :)
Swetabja Hazra
34

Die herkömmliche Vorgehensweise spielt mit ES6 nicht gut. Sie können dies stattdessen tun:

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

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

Beachten Sie, dass das Ereignisziel das angeklickte Element ist, das möglicherweise nicht das gewünschte Element ist (es kann sich um ein untergeordnetes Element handeln, das das Ereignis empfangen hat). So erhalten Sie das eigentliche Element:

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

  this.delete(targetElement.data('id'));
});
Waffel
quelle
0

Eine einfache Möglichkeit besteht darin, das Datenattribut an Ihr HTML-Tag zu übergeben.

Beispiel:

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