Obtenir l'ID de l'élément qui a déclenché un événement
https://stackoverflow.com/questions/48239
-
09-06-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
Existe-t-il un moyen d'obtenir l'ID de l'élément qui déclenche un événement ?
Je pense à quelque chose comme :
<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>
Sauf bien sur que le var test doit contenir l'identifiant "aaa", si l'événement est déclenché à partir du premier formulaire, et "bbb", si l'événement est déclenché à partir du deuxième formulaire.
La solution
Dans jQuery event.target fait toujours référence à l'élément qui a déclenché l'événement, où event est le paramètre passé à la fonction. http://api.jquery.com/category/events/event-object/
$(document).ready(function() {
$("a").click(function(event) {
alert(event.target.id);
});
});
Notez également que this fonctionnera également, mais ce n'est pas un objet jQuery, donc si vous souhaitez utiliser une fonction jQuery dessus, vous devez y faire référence comme $(this), par exemple.:
$(document).ready(function() {
$("a").click(function(event) {
// this.append wouldn't work
$(this).append(" Clicked");
});
});
Autres conseils
Pour référence, essayez ceci !Ça marche!
jQuery("classNameofDiv").click(function() {
var contentPanelId = jQuery(this).attr("id");
alert(contentPanelId);
});
Bien que cela soit mentionné dans d'autres articles, je voulais préciser ceci :
$(event.target).id n'est pas défini
$(event.target)[0].id donne l'attribut id.
event.target.id donne également l'attribut id.
this.id donne l'attribut id.
et
$(this).id est indéfini.
Les différences, bien sûr, se situent entre les objets jQuery et les objets DOM."id" est une propriété DOM, vous devez donc être sur l'objet élément DOM pour l'utiliser.
(Ça m'a fait trébucher, donc ça a probablement fait trébucher quelqu'un d'autre)
Pour tous les événements, sans se limiter à jQuery, vous pouvez utiliser
var target = event.target || event.srcElement;
var id = target.id
Où event.target échoue, il se replie sur event.srcElement pour IE.Pour clarifier le code ci-dessus, il ne nécessite pas jQuery mais fonctionne également avec jQuery.
Vous pouvez utiliser (this) pour référencer l'objet qui a déclenché la fonction.
'this' est un DOMAINE élément lorsque vous êtes à l'intérieur d'une fonction de rappel (dans le contexte de jQuery), par exemple, en étant appelé par le clic, each, bind, etc.méthodes.
Voici où vous pouvez en savoir plus : http://remysharp.com/2007/04/12/jquerys-this-demystified/
Je génère dynamiquement une table à partir d'une base de données, reçois les données en JSON et les mets dans une table.Chaque ligne du tableau a un numéro unique ID, qui est nécessaire pour d'autres actions, donc, si le DOM est modifié, vous avez besoin d'une approche différente :
$("table").delegate("tr", "click", function() {
var id=$(this).attr('id');
alert("ID:"+id);
});
Élément qui a déclenché l'événement dans lequel nous nous trouvons événement propriété
event.currentTarget
On a Nœud DOM objet sur lequel a été défini le gestionnaire d'événements.
Le nœud le plus imbriqué dans lequel le processus de bouillonnement a commencé
event.target
L'objet événement est toujours le premier attribut du gestionnaire d'événements, exemple :
document.querySelector("someSelector").addEventListener(function(event){
console.log(event.target);
console.log(event.currentTarget);
});
En savoir plus sur la délégation d'événements Vous pouvez lire dans http://maciejsikora.com/standard-events-vs-event-delegation/
L'élément source en tant qu'objet jQuery doit être obtenu via
var $el = $(event.target);
Cela vous permet d'obtenir la source du clic, plutôt que l'élément auquel la fonction de clic a également été attribuée.Peut être utile lorsque l'événement de clic est sur un objet parent, par exemple, un événement de clic sur une ligne de table, et vous avez besoin de la cellule qui a été cliqué
$("tr").click(function(event){
var $td = $(event.target);
});
Vous pouvez essayer d'utiliser :
$('*').live('click', function() {
console.log(this.id);
return false;
});
Dans le cas de gestionnaires d'événements délégués, vous pourriez avoir quelque chose comme ceci :
<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>
et votre code JS comme ceci :
$(document).ready(function() {
$('ul').on('click li', function(event) {
var $target = $(event.target),
itemId = $target.data('id');
//do something with itemId
});
});
Vous constaterez très probablement que itemId est undefined, car le contenu du LI est enveloppé dans un <span>, ce qui signifie le <span> sera probablement la cible de l'événement.Vous pouvez contourner ce problème avec un petit chèque, comme ceci :
$(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
});
});
Ou, si vous préférez maximiser la lisibilité (et également éviter la répétition inutile des appels d'encapsulation 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
});
});
Lors de l'utilisation de la délégation d'événements, le .is() Cette méthode est inestimable pour vérifier que la cible de votre événement (entre autres choses) correspond réellement à ce dont vous avez besoin.Utiliser .closest(selector) pour rechercher l'arborescence DOM et utiliser .find(selector) (généralement couplé à .first(), un péché .find(selector).first()) pour le rechercher.Vous n'avez pas besoin d'utiliser .first() lors de l'utilisation .closest(), car il ne renvoie que le premier élément ancêtre correspondant, tandis que .find() renvoie tous les descendants correspondants.
Utiliser peut utiliser l'événement .on
$("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);
}
JSFiddle fonctionnel ici.
Cela fonctionne à un niveau supérieur z-index que le paramètre d'événement mentionné dans les réponses ci-dessus :
$("#mydiv li").click(function(){
ClickedElement = this.id;
alert(ClickedElement);
});
De cette façon, vous obtiendrez toujours le id du (dans cet exemple li) élément.Également lorsque vous cliquez sur un élément enfant du parent.
this.element.attr("id") fonctionne bien dans IE8.
Ces deux fonctionnent,
jQuery(this).attr("id");
et
alert(this.id);
Utilisez simplement le this référence
$(this).attr("id")
ou
$(this).prop("id")
Vous pouvez utiliser la fonction pour obtenir l'identifiant et la valeur de l'élément modifié (dans mon exemple, j'ai utilisé une balise Select.
$('select').change(
function() {
var val = this.value;
var id = jQuery(this).attr("id");
console.log("value changed" + String(val)+String(id));
}
);
cela fonctionne avec la plupart des types d'éléments :
$('selector').on('click',function(e){
log(event.currentTarget.id);
});
je travaille avec
jQuery saisie semi-automatique
J'ai essayé de chercher un event comme décrit ci-dessus, mais lorsque la fonction de requête se déclenche, elle ne semble pas être disponible.j'ai utilisé this.element.attr("id") pour obtenir l'ID de l'élément à la place, et cela semble bien fonctionner.
Dans le cas d'Angular 7.x, vous pouvez obtenir l'élément natif et son identifiant ou ses propriétés.
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>
