type - javascript title ändern



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

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 der var- test die ID "aaa" enthalten sollte, wenn das Ereignis vom ersten Formular ausgelöst wird, und "bbb" , wenn das Ereignis vom zweiten Formular ausgelöst wird.


Answer #1

Als Referenz versuchen Sie dies! Es klappt!

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

Answer #2

Beide arbeiten,

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

und

alert(this.id);

Answer #3

Dies funktioniert auf einem höheren z-index als der in den obigen Antworten erwähnte Event-Parameter:

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

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

Auf diese Weise erhalten Sie immer die id des Elements (in diesem Beispiel li ). Auch wenn auf ein Kindelement des Elternteils geklickt wird.


Answer #4

Element, das das Ereignis ausgelöst hat, das wir in der Ereigniseigenschaft haben

event.currentTarget

Wir erhalten ein DOM-Knotenobjekt , 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 Event-Delegation finden Sie unter http://maciejsikora.com/standard-events-vs-event-delegation/


Answer #5

Ich erzeuge eine Tabelle dynamisch aus einer Datenbank, empfange die Daten in JSON und lege sie in eine Tabelle. Jede Tabellenzeile hat eine eindeutige ID , die 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);  
});

Answer #6

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 nicht undefined , da der Inhalt der LI in ein <span> , was bedeutet, dass die <span> wahrscheinlich das Ereignisziel ist. 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, ist die .is() -Methode von unschätzbarem Wert für die Überprüfung, ob Ihr Ereignisziel (neben anderen Dingen) tatsächlich das ist, was Sie benötigen. Verwenden Sie .closest(selector) , um den DOM-Baum zu durchsuchen, und verwenden Sie .find(selector) ( .first() mit .first() gekoppelt, wie in .find(selector).first() ), um nach ihm zu suchen. Sie müssen .first() wenn Sie .closest() , da nur das erste übereinstimmende .find() , während .find() alle übereinstimmenden Nachkommen zurückgibt.


Answer #7

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

this.id gibt das ID-Attribut an.

und

$(this).id ist undefiniert.

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

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


Answer #8

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

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

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


Answer #9

Sie können versuchen zu verwenden:

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

Answer #10

Verwenden Sie einfach this Referenz

$(this).attr("id")

oder

$(this).prop("id")

Answer #11

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


Answer #12
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 here .





jquery