Abrufen der ID des Elements, das ein Ereignis ausgelöst hat
https://stackoverflow.com/questions/48239
-
09-06-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianFrage
Gibt es eine Möglichkeit, die ID des Elements zu ermitteln, das ein Ereignis auslöst?
Ich denke so etwas wie:
<html>
<head>
<script type="text/javascript" src="starterkit/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("a").click(function () {
var test = caller.id;
alert(test.val());
});
});
</script>
</head>
<body>
<form class="item" id="aaa">
<input class="title"></input>
</form>
<form class="item" id="bbb">
<input class="title"></input>
</form>
</body>
</html>
Außer natürlich, dass die var test sollte die ID enthalten "aaa", wenn das Ereignis vom ersten Formular aus ausgelöst wird, und "bbb", wenn das Ereignis aus dem zweiten Formular ausgelöst wird.
Lösung
In jQuery event.target bezieht sich immer auf das Element, das das Ereignis ausgelöst hat, wo event ist der an die Funktion übergebene Parameter. http://api.jquery.com/category/events/event-object/
$(document).ready(function() {
$("a").click(function(event) {
alert(event.target.id);
});
});
Beachten Sie auch das this wird auch funktionieren, aber es ist kein jQuery-Objekt. Wenn Sie also eine jQuery-Funktion darauf verwenden möchten, müssen Sie darauf verweisen als $(this), z.B.:
$(document).ready(function() {
$("a").click(function(event) {
// this.append wouldn't work
$(this).append(" Clicked");
});
});
Andere Tipps
Probieren Sie dies als Referenz aus!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 es klarstellen:
$(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 auf dem DOM-Elementobjekt befinden, um sie verwenden zu können.
(Es hat mich zum Stolpern gebracht, also hat es wahrscheinlich auch jemand anderen zum Stolpern gebracht)
Für alle Fälle können Sie nicht nur jQuery verwenden
var target = event.target || event.srcElement;
var id = target.id
Wo event.target scheitert es, fällt es zurück event.srcElement für IE.Um den obigen Code zu verdeutlichen, ist jQuery nicht erforderlich, er funktioniert jedoch 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 (im Kontext von jQuery) befinden und beispielsweise durch Klicken, Jeder, Binden usw. aufgerufen werden.Methoden.
Hier erfahren Sie mehr: http://remysharp.com/2007/04/12/jquerys-this-demystified/
Ich erstelle dynamisch eine Tabelle aus einer Datenbank, empfange die Daten in JSON und füge sie in eine Tabelle ein.Jede Tabellenzeile hat ein Unikat ID, was für weitere Aktionen benötigt wird. Wenn das DOM also geändert wird, benötigen Sie einen anderen Ansatz:
$("table").delegate("tr", "click", function() {
var id=$(this).attr('id');
alert("ID:"+id);
});
Element, das das ausgelöste Ereignis ausgelöst hat Ereignis Eigentum
event.currentTarget
Wir bekommen DOM-Knoten Objekt, für das der Ereignishandler festgelegt wurde.
Wir haben den meisten verschachtelten 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);
});
Mehr zum Thema Event-Delegation können Sie hier nachlesen 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 die Klickfunktion ebenfalls zugewiesen wurde.Kann nützlich sein, wenn sich das Klickereignis in einem übergeordneten Objekt befindet, z. B. ein Klickereignis in einer Tabellenzeile, und Sie benötigen die angeklickte Zelle
$("tr").click(function(event){
var $td = $(event.target);
});
Sie können versuchen, Folgendes zu verwenden:
$('*').live('click', function() {
console.log(this.id);
return false;
});
Im Fall von delegierten Ereignishandlern könnten Sie etwa 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 etwa so:
$(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 lautet undefined, da der Inhalt des LI in a verpackt ist <span>, was bedeutet, dass <span> wird wahrscheinlich das Ziel der Veranstaltung sein.Sie können dies mit einem kleinen Scheck umgehen, etwa so:
$(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 auch 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 wird die .is() Die Methode ist von unschätzbarem Wert, um zu überprüfen, ob Ihr Ereignisziel (unter anderem) tatsächlich das ist, was Sie benötigen.Verwenden .closest(selector) um den DOM-Baum zu durchsuchen und zu verwenden .find(selector) (im Allgemeinen gekoppelt mit .first(), wie in .find(selector).first()), um danach zu suchen.Sie müssen es nicht verwenden .first() beim Benutzen .closest(), da es nur das erste passende Vorfahrenelement zurückgibt, while .find() gibt alle passenden Nachkommen zurück.
Verwendung kann .on-Ereignis verwenden
$("table").on("tr", "click", function() {
var id=$(this).attr('id');
alert("ID:"+id);
});
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);
}
Funktionierende JSFiddle Hier.
Dies funktioniert auf einer höheren Ebene z-index als der in den obigen Antworten erwähnte Ereignisparameter:
$("#mydiv li").click(function(){
ClickedElement = this.id;
alert(ClickedElement);
});
Auf diese Weise erhalten Sie immer das id des (in diesem Beispiel li) Element.Auch wenn auf ein untergeordnetes Element des übergeordneten Elements geklickt wird.
this.element.attr("id") Funktioniert gut im IE8.
Beides funktioniert,
jQuery(this).attr("id");
Und
alert(this.id);
Benutzen Sie einfach die this Referenz
$(this).attr("id")
oder
$(this).prop("id")
Sie können die Funktion verwenden, um die ID und den Wert für das geänderte Element abzurufen (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));
}
);
Dies funktioniert mit den meisten Arten von Elementen:
$('selector').on('click',function(e){
log(event.currentTarget.id);
});
Ich arbeite mit
jQuery-Autovervollständigung
Ich habe versucht, nach einem zu suchen event wie oben beschrieben, aber wenn die Anforderungsfunktion ausgelöst wird, scheint sie nicht verfügbar zu sein.ich benutzte this.element.attr("id") um stattdessen die ID des Elements abzurufen, 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>
