Abrufen der ID des Elements, das ein Ereignis ausgelöst hat

Gibt es eine Möglichkeit, die ID des Elements abzurufen, das ein Ereignis auslöst?

Ich denke so etwas wie:

$(document).ready(function() {
  $("a").click(function() {
    var test = caller.id;
    alert(test.val());
  });
});

<script type="text/javascript" src="starterkit/jquery.js"></script>

<form class="item" id="aaa">
  <input class="title"></input>
</form>
<form class="item" id="bbb">
  <input class="title"></input>
</form>

Außer natürlich, dass die Variable testdie ID enthalten sollte "aaa", wenn das Ereignis aus dem ersten Formular ausgelöst wird und "bbb"wenn das Ereignis aus dem zweiten Formular ausgelöst wird.

In jQuery event.target bezieht sich immer auf das Element, das das Ereignis ausgelöst hat, wobei eventder Parameter an die Funktion übergeben wird. http://api.jquery.com/category/events/event-object/

$(document).ready(function() {
    $("a").click(function(event) {
        alert(event.target.id);
    });
});

Beachten Sie auch, dass dies thisebenfalls funktioniert, es sich jedoch nicht um ein jQuery-Objekt handelt. Wenn Sie also eine jQuery-Funktion verwenden möchten, müssen Sie darauf verweisen $(this), z.

$(document).ready(function() {
    $("a").click(function(event) {
        // this.append wouldn't work
        $(this).append(" Clicked");
    });
});

Versuchen Sie dies als Referenz! Es klappt!

jQuery("classNameofDiv").click(function() {
    var contentPanelId = jQuery(this).attr("id");
    alert(contentPanelId);
});

Obwohl es in anderen Beiträgen erwähnt wird, wollte ich dies formulieren:

$(event.target).id ist nicht definiert

$(event.target)[0].id gibt das id-Attribut an.

event.target.id gibt auch das id-Attribut an.

this.id gibt das id-Attribut an.

und

$(this).id ist nicht definiert.

Die Unterschiede bestehen natürlich zwischen jQuery-Objekten und DOM-Objekten. "id" ist eine DOM-Eigenschaft, daher müssen Sie sich im DOM-Elementobjekt befinden, um sie verwenden zu können.

(Es hat mich gestolpert, also hat es wahrscheinlich jemand anderen gestolpert)

Für alle Ereignisse, nicht nur für jQuery, die Sie verwenden können

var target = event.target || event.srcElement;
var id = target.id

Wo dies event.targetfehlschlägt, wird auf event.srcElementIE zurückgegriffen. Zur Verdeutlichung des obigen Codes ist jQuery nicht erforderlich, funktioniert aber auch mit jQuery.

Sie können verwenden, (this)um auf das Objekt zu verweisen, das die Funktion ausgelöst hat.

'this'ist ein DOM Element, wenn Sie sich innerhalb einer Rückruffunktion befinden (im Kontext von jQuery) und beispielsweise von den Methoden click, each, bind usw. aufgerufen werden.

Hier können Sie mehr erfahren: http://remysharp.com/2007/04/12/jquerys-this-demystified/

Ich generiere eine Tabelle dynamisch aus einer Datenbank, empfange die Daten in JSON und füge sie in eine Tabelle ein. Jede Tabellenzeile hat ein eindeutiges Element ID, das für weitere Aktionen benötigt wird. Wenn also das DOM geändert wird, benötigen Sie einen anderen Ansatz:

$("table").delegate("tr", "click", function() {
   var id=$(this).attr('id');
   alert("ID:"+id);  
});

Element , das Ereignis ausgelöst haben wir in Event Immobilien

event.currentTarget

Wir erhalten ein DOM-Knotenobjekt , für das der Ereignishandler festgelegt wurde.

Der am meisten verschachtelte Knoten, der den Bubbling-Prozess gestartet hat

event.target

Das Ereignisobjekt ist immer das erste Attribut des Ereignishandlers. Beispiel:

document.querySelector("someSelector").addEventListener(function(event){

 console.log(event.target);
 console.log(event.currentTarget);

});

Weitere Informationen zur Delegation von Veranstaltungen finden Sie unter http://maciejsikora.com/standard-events-vs-event-delegation/.

Das Quellelement als jQuery-Objekt sollte über abgerufen werden

var $el = $(event.target);

Dadurch erhalten Sie die Quelle des Klicks und nicht das Element, dem auch die Klickfunktion zugewiesen wurde. Kann nützlich sein, wenn sich das Klickereignis auf einem übergeordneten Objekt befindet. Ein Klickereignis in einer Tabellenzeile, und Sie benötigen die Zelle, auf die geklickt wurde

$("tr").click(function(event){
    var $td = $(event.target);
});

Sie können versuchen, Folgendes zu verwenden:

$('*').live('click', function() {
 console.log(this.id);
 return false;
});

Dies funktioniert mit den meisten Arten von Elementen:

$('selector').on('click',function(e){
    log(e.currentTarget.id);
    });

Im Fall von delegierten Ereignishandlern, bei denen Sie möglicherweise Folgendes haben:

<ul>
    <li data-id="1">
        <span>Item 1</span>
    </li>
    <li data-id="2">
        <span>Item 2</span>
    </li>
    <li data-id="3">
        <span>Item 3</span>
    </li>
    <li data-id="4">
        <span>Item 4</span>
    </li>
    <li data-id="5">
        <span>Item 5</span>
    </li>
</ul>

und Ihr JS-Code wie folgt:

$(document).ready(function() {
    $('ul').on('click li', function(event) {
        var $target = $(event.target),
            itemId = $target.data('id');

        //do something with itemId
    });
});

Sie werden höchstwahrscheinlich feststellen, dass itemId ist undefined, da der Inhalt des LI in a eingeschlossen ist <span>, was bedeutet, dass das <span>wahrscheinlich das Ereignisziel ist. Sie können dies mit einem kleinen Scheck umgehen, wie folgt:

$(document).ready(function() {
    $('ul').on('click li', function(event) {
        var $target = $(event.target).is('li') ? $(event.target) : $(event.target).closest('li'),
            itemId = $target.data('id');

        //do something with itemId
    });
});

Oder wenn Sie die Lesbarkeit maximieren möchten (und unnötige Wiederholungen von jQuery-Wrapping-Aufrufen vermeiden möchten):

$(document).ready(function() {
    $('ul').on('click li', function(event) {
        var $target = $(event.target),
            itemId;

        $target = $target.is('li') ? $target : $target.closest('li');
        itemId = $target.data('id');

        //do something with itemId
    });
});

Bei Verwendung der Ereignisdelegierung ist die .is()Methode von unschätzbarem Wert, um zu überprüfen, ob Ihr Ereignisziel (unter anderem) tatsächlich das ist, was Sie benötigen. Verwenden Sie .closest(selector)diese Option, um den DOM-Baum zu durchsuchen, und verwenden Sie ihn .find(selector)(im Allgemeinen gekoppelt mit .first(), wie in .find(selector).first()), um ihn zu durchsuchen. Sie müssen es nicht .first()verwenden .closest(), da es nur das erste übereinstimmende Vorfahrenelement .find()zurückgibt , während alle übereinstimmenden Nachkommen zurückgegeben werden.

Use can Use .on event

  $("table").on("tr", "click", function() {
                    var id=$(this).attr('id');
                    alert("ID:"+id);  
                });

Dies funktioniert bei einem höheren z-indexals dem in den obigen Antworten genannten Ereignisparameter:

$("#mydiv li").click(function(){

    ClickedElement = this.id;
    alert(ClickedElement);
});

Auf diese Weise erhalten Sie immer das Element id(in diesem Beispiel li). Auch wenn auf ein untergeordnetes Element des übergeordneten Elements geklickt wird.

var buttons = document.getElementsByTagName('button');
var buttonsLength = buttons.length;
for (var i = 0; i < buttonsLength; i++){
    buttons[i].addEventListener('click', clickResponse, false);
};
function clickResponse(){
    // do something based on button selection here...
    alert(this.id);
}

JSFiddle hier arbeiten .

Verwenden Sie einfach die thisReferenz

$(this).attr("id")

oder

$(this).prop("id")

this.element.attr("id") funktioniert gut in IE8.

Beide Arbeiten,

jQuery(this).attr("id");

und

alert(this.id);

$(".classobj").click(function(e){
    console.log(e.currentTarget.id);
})

Mit der Funktion können Sie die ID und den Wert für das geänderte Element abrufen (in meinem Beispiel habe ich ein Select-Tag verwendet.

              $('select').change(
                   function() {
                        var val = this.value;
                        var id = jQuery(this).attr("id");
                        console.log("value changed" + String(val)+String(id));
                   }
               );

Ich arbeite mit

jQuery Autocomplete

Ich habe versucht, nach einem eventwie oben beschrieben zu suchen , aber wenn die Anforderungsfunktion ausgelöst wird, scheint sie nicht verfügbar zu sein. Ich habe this.element.attr("id")stattdessen die ID des Elements erhalten, und es scheint gut zu funktionieren.

Im Fall von Angular 7.x können Sie das native Element und seine ID oder Eigenschaften abrufen.

myClickHandler($event) {
    this.selectedElement = <Element>$event.target;
    console.log(this.selectedElement.id)
    this.selectedElement.classList.remove('some-class');
}

html:

<div class="list-item" (click)="myClickHandler($event)">...</div>