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


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

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 ausgelöst wird, und "bbb", wenn das Ereignis von der zweiten Form ausgelöst wird.


833
2017-09-07 08:09


Ursprung


Antworten:


In jQuery event.target bezieht sich immer auf das Element, das das Ereignis ausgelöst hat 'event' ist der Parameter, der 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 das 'this' funktioniert auch, aber es ist kein jQuery-Objekt. Wenn Sie also eine jQuery-Funktion verwenden möchten, müssen Sie darauf verweisen '$(this)', z.B.:

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

1138
2017-09-07 19:02



Als Referenz versuchen Sie dies! Es klappt!

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

147
2017-09-02 08:01



Obwohl es in anderen Posts erwähnt wird, wollte ich dies aussprechen:

$(event.target).id ist nicht definiert

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

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

this.id Gibt das ID-Attribut an.

und

$(this).id ist nicht definiert.

Die Unterschiede liegen natürlich zwischen jQuery-Objekten und DOM-Objekten. "id" ist eine DOM-Eigenschaft, also müssen Sie auf dem DOM-Elementobjekt sein, um es zu verwenden.

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


78
2017-11-06 13:38



Für alle Ereignisse, nicht nur auf jQuery beschränkt, die Sie verwenden können

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

Woher event.target scheitert es fällt wieder auf event.srcElement für IE. Um den obigen Code zu verdeutlichen, ist jQuery nicht erforderlich, aber es funktioniert auch mit jQuery.


69
2017-07-19 14:23



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

'this' ist ein DOM Element, wenn Sie innerhalb einer Callback-Funktion sind (im Kontext von jQuery), zum Beispiel durch Methoden wie click, each, bind, etc. aufgerufen werden.

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


58
2017-09-07 08:12



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

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

25
2017-09-12 14:14



Element, das das Ereignis ausgelöst hat, in dem wir uns befinden Veranstaltung Eigentum

event.currentTarget

Wir bekommen DOM-Knoten Objekt, auf dem der Event-Handler gesetzt wurde.


Der meiste verschachtelte Knoten, der den bubbling-Prozess gestartet hat

event.target

Event-Objekt ist immer das erste Attribut des Event-Handlers, Beispiel:

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

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

});

Weitere Informationen zur Ereignisdelegierung Sie können einlesen http://maciejsikora.com/standard-events-vs-event-delegation/


14
2017-10-14 13:04



Das Quellelement als jQuery-Objekt sollte über erhalten werden

var $el = $(event.target);

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

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

10
2018-03-22 15:41



Sie können versuchen zu verwenden:

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

7
2017-11-03 17:40



Im Fall von delegierten Ereignishandlern, in denen Sie Folgendes haben könnten:

<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 dein 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 mehr als wahrscheinlich finden, dass itemId ist undefined, da der Inhalt des LI in a eingehüllt ist <span>, was das bedeutet <span> wird wahrscheinlich das Ereignisziel sein. Sie können dies mit einem kleinen Scheck umgehen, 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 außerdem unnötige Wiederholungen von jQuery-Umbruchaufrufen vermeiden):

$(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
    });
});

Wenn Sie die Ereignisdelegierung verwenden, .is() Methode ist von unschätzbarem Wert für die Überprüfung, dass Ihr Ereignisziel (unter anderem) tatsächlich das ist, was Sie benötigen. Benutzen .closest(selector) um den DOM-Baum zu durchsuchen und zu verwenden .find(selector) (in der Regel gekoppelt mit .first(), wie in .find(selector).first()) um es zu suchen. Sie müssen nicht verwenden .first() beim Benutzen .closest(), da es nur das erste übereinstimmende Vorgängerelement zurückgibt .find() gibt alle übereinstimmenden Nachkommen zurück.


5
2018-06-18 20:35