Ottenere l'ID dell'elemento che ha generato un evento

Esiste un modo per ottenere l'ID dell'elemento che genera un evento?

Sto pensando a qualcosa del tipo:

$(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>

Tranne ovviamente che var testdovrebbe contenere l'id "aaa", se l'evento viene generato dal primo modulo e "bbb", se l'evento viene generato dal secondo modulo.

In jQuery event.targetsi riferisce sempre all'elemento che ha attivato l'evento, dove si eventtrova il parametro passato alla funzione. http://api.jquery.com/category/events/event-object/

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

Si noti inoltre che thisfunzionerà anche, ma che non è un oggetto jQuery, quindi se si desidera utilizzare una funzione jQuery su di esso, è necessario fare riferimento ad esso come $(this), ad esempio:

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

Per riferimento, prova questo! Funziona!

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

Sebbene sia menzionato in altri post, volevo precisarlo:

$(event.target).id non è definito

$(event.target)[0].id dà l'attributo id.

event.target.id fornisce anche l'attributo id.

this.id dà l'attributo id.

e

$(this).id non è definito.

Le differenze, ovviamente, sono tra oggetti jQuery e oggetti DOM. "id" è una proprietà DOM, quindi devi essere sull'oggetto elemento DOM per usarlo.

(Mi ha fatto inciampare, quindi probabilmente è inciampato in qualcun altro)

Per tutti gli eventi, non limitato a solo jQuery che puoi usare

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

Dove event.targetfallisce ricade su event.srcElementIE. Per chiarire il codice sopra riportato non è necessario jQuery ma funziona anche con jQuery.

È possibile utilizzare (this)per fare riferimento all'oggetto che ha attivato la funzione.

'this'è un DOM elemento quando ci si trova all'interno di una funzione di callback (nel contesto di jQuery), ad esempio, essendo chiamato dai metodi click, each, bind, etc.

Qui puoi saperne di più: http://remysharp.com/2007/04/12/jquerys-this-demystified/

Genero una tabella in modo dinamico da un database, ricevo i dati in JSON e li inserisco in una tabella. Ogni riga della tabella ha un unico ID, necessario per ulteriori azioni, quindi se il DOM viene modificato è necessario un approccio diverso:

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

Elemento che ha generato l'evento che abbiamo nella proprietà dell'evento

event.currentTarget

Otteniamo l' oggetto nodo DOM su cui è stato impostato il gestore eventi.

Nodo più nidificato che ha avviato il processo di gorgogliamento in cui ci troviamo

event.target

L'oggetto evento è sempre il primo attributo del gestore eventi, ad esempio:

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

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

});

Ulteriori informazioni sulla delega di eventi È possibile leggere in http://maciejsikora.com/standard-events-vs-event-delegation/

L'elemento sorgente come oggetto jQuery dovrebbe essere ottenuto tramite

var $el = $(event.target);

Questo ti dà la fonte del clic, piuttosto che l'elemento a cui è stata assegnata anche la funzione clic. Può essere utile quando l'evento click è su un oggetto genitore EG.un evento click su una riga della tabella e hai bisogno della cella su cui è stato fatto clic

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

Puoi provare a usare:

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

funziona con la maggior parte dei tipi di elementi:

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

Nel caso dei gestori di eventi delegati, dove potresti avere qualcosa del genere:

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

e il tuo codice JS in questo modo:

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

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

Molto probabilmente scoprirai che itemId è undefined, poiché il contenuto di LI è racchiuso in a <span>, il che significa <span>che probabilmente sarà il target dell'evento. Puoi aggirare questo problema con un piccolo segno di spunta, in questo modo:

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

Oppure, se si preferisce massimizzare la leggibilità (ed anche evitare inutili ripetizioni delle chiamate di wrapping jQuery):

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

Quando si utilizza la delega di eventi, il .is()metodo è prezioso per verificare che il target dell'evento (tra le altre cose) sia effettivamente ciò che è necessario. Usare .closest(selector)per cercare l'albero del DOM e usare .find(selector)(generalmente accoppiato con .first(), come in .find(selector).first()) per cercarlo. Non è necessario utilizzarlo .first()durante l'utilizzo .closest(), poiché restituisce solo il primo elemento antenato corrispondente, mentre .find()restituisce tutti i discendenti corrispondenti.

Use can Use .on event

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

Funziona con un z-indexparametro di evento superiore a quello indicato nelle risposte sopra:

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

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

In questo modo otterrai sempre l' elemento id(in questo esempio li). Anche quando si fa clic su un elemento figlio del genitore ..

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

Lavora JSFiddle qui .

Usa solo il thisriferimento

$(this).attr("id")

o

$(this).prop("id")

this.element.attr("id") funziona bene in IE8.

Entrambi questi lavori,

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

e

alert(this.id);

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

È possibile utilizzare la funzione per ottenere l'id e il valore per l'elemento modificato (nel mio esempio, ho usato un tag Select.

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

Sto lavorando con

Completamento automatico jQuery

Ho provato a cercarne uno eventcome descritto sopra, ma quando viene attivata la funzione di richiesta non sembra essere disponibile. this.element.attr("id")Invece, ho usato per ottenere l'ID dell'elemento e sembra funzionare bene.

Nel caso di Angular 7.x è possibile ottenere l'elemento nativo e il suo id o proprietà.

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>