Ottenere l'ID dell'elemento che ha generato un evento
https://stackoverflow.com/questions/48239
-
09-06-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianDomanda
C'è un modo per ottenere l'ID dell'elemento che genera un evento?
Sto pensando a qualcosa di simile:
<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>
Tranne, naturalmente, che il var test deve contenere l'id "aaa", se l'evento viene generato dal primo modulo, e "bbb", se l'evento viene generato dal secondo modulo.
Soluzione
In jQuery event.target si riferisce sempre l'elemento che ha scatenato l'evento, dove event è il parametro passato alla funzione. http://api.jquery.com/category/events/event-object/
$(document).ready(function() {
$("a").click(function(event) {
alert(event.target.id);
});
});
Nota anche che this funziona anche, ma che non è un oggetto jQuery, quindi se si desidera utilizzare una funzione jQuery su di esso, quindi è necessario fare riferimento ad esso come $(this), ad es.:
$(document).ready(function() {
$("a").click(function(event) {
// this.append wouldn't work
$(this).append(" Clicked");
});
});
Altri suggerimenti
Per riferimento, provare questo!Funziona!
jQuery("classNameofDiv").click(function() {
var contentPanelId = jQuery(this).attr("id");
alert(contentPanelId);
});
Se è già detto in altri post, ho voluto per scrivere questo:
$(event.target).id non è definito
$(event.target)[0].id dà l'attributo id.
event.target.id dà anche l'attributo id.
this.id dà l'attributo id.
e
$(this).id non è definito.
Le differenze, ovviamente, è tra jQuery oggetti e oggetti DOM."id" è un DOM proprietà, quindi devi essere su un elemento DOM oggetto da utilizzare.
(Che mi ha scattato, quindi probabilmente scattato fino qualcun altro)
Per tutti gli eventi, non solo per jQuery è possibile utilizzare
var target = event.target || event.srcElement;
var id = target.id
Dove event.target non riesce torna su event.srcElement per IE.Per chiarire il codice di cui sopra, non necessita di jQuery, ma funziona anche con jQuery.
È possibile utilizzare (this) per fare riferimento all'oggetto che ha attivato la funzione.
'this' è un DOM elemento quando si è all'interno di una funzione di callback (nel contesto di jQuery), per esempio, di essere chiamato da scegliere, ogni, associazione, etc.i metodi.
Qui è dove si può imparare di più: http://remysharp.com/2007/04/12/jquerys-this-demystified/
Generare una tabella dinamicamente un database di ricevere i dati in JSON e inserirli in una tabella.Ogni riga della tabella avuto un unico ID, che è necessario per ulteriori azioni, in modo che, se il DOM è alterato è bisogno di un approccio diverso:
$("table").delegate("tr", "click", function() {
var id=$(this).attr('id');
alert("ID:"+id);
});
Elemento, questo, che sparò evento che abbiamo in evento proprietà
event.currentTarget
Abbiamo Nodo DOM oggetto su cui è stato impostato gestore di eventi.
La maggior parte nidificati nodo che iniziato a gorgogliare processo che abbiamo in
event.target
Oggetto evento è sempre il primo attributo del gestore di eventi, ad esempio:
document.querySelector("someSelector").addEventListener(function(event){
console.log(event.target);
console.log(event.currentTarget);
});
Di più su eventi delegazione Si può leggere in http://maciejsikora.com/standard-events-vs-event-delegation/
L'elemento di origine come un oggetto jQuery dovrebbero essere ottenuti tramite
var $el = $(event.target);
Questa è la fonte di scegliere, piuttosto che l'elemento che la funzione del clic è stato assegnato troppo.Può essere utile quando l'evento click su un oggetto padre ES.un evento click su una riga della tabella, e avete bisogno di cella che è stato cliccato
$("tr").click(function(event){
var $td = $(event.target);
});
Si può provare a utilizzare:
$('*').live('click', function() {
console.log(this.id);
return false;
});
In caso di delega di gestori di eventi, dove si potrebbe avere qualcosa di simile a questo:
<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 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
});
});
È più probabile trovare che itemId è undefined, come il contenuto del LI è avvolto in un <span>, il che significa che il <span> probabilmente sarà il caso di destinazione.È possibile ottenere questo con un piccolo controllo, 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
});
});
O, se si preferisce massimizzare la leggibilità (e anche di evitare inutili ripetizioni di jQuery avvolgendo le chiamate):
$(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 caso di delega, il .is() il metodo è prezioso per verificare che il target dell'evento (tra le altre cose) è in realtà quello che avete bisogno di essere.Utilizzare .closest(selector) per la ricerca di un albero DOM, e l'uso .find(selector) (generalmente accoppiato con .first(), come in .find(selector).first()) la ricerca verso il basso.Non è necessario utilizzare .first() quando si utilizza .closest(), come si restituisce solo il primo corrispondente elemento predecessore, mentre .find() restituisce tutte le offerte di discendenti.
Uso di possono Utilizzare .sull'evento
$("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);
}
Lavoro JSFiddle qui.
Questo funziona su una maggiore z-index rispetto al parametro dell'evento citato in risposte di cui sopra:
$("#mydiv li").click(function(){
ClickedElement = this.id;
alert(ClickedElement);
});
In questo modo si avrà sempre la id della (in questo esempio li) elemento.Anche quando si fa clic su un elemento figlio del padre..
this.element.attr("id") funziona bene in IE8.
Entrambi questi lavori,
jQuery(this).attr("id");
e
alert(this.id);
Basta usare il this riferimento
$(this).attr("id")
o
$(this).prop("id")
È possibile utilizzare la funzione per ottenere l'id e il valore dell'elemento modificato(nel mio esempio, io 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));
}
);
questo funziona con la maggior parte dei tipi di elementi:
$('selector').on('click',function(e){
log(event.currentTarget.id);
});
Sto lavorando con
jQuery Autocomplete
Ho provato a cercare per un event come descritto sopra, ma quando la funzione di richiesta incendi non sembra essere disponibile.Ho usato this.element.attr("id") per ottenere l'ID dell'elemento, invece, e sembra funzionare bene.
In caso di Angolare 7.x si può ottenere il nativo elemento 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>
