web-dev-qa-db-fra.com

Comment obtenir l'id de l'élément cliqué avec jQuery

<div class="main_div">
    <div id="inner_div">    
        <span id="d1" class="get_clicked">click to get id</span>
    </div>
</div>

Comment obtenir l'id de l'élément cliqué? La plage qui est présente dans inner_div aura différents identifiants, car je chargerai la plage à partir du modèle (MVC) à l'aide de jquery ajax. Donc, il y aura un nombre n d'envergure. Toute la durée aura un identifiant unique. Je veux obtenir l'id de la durée sur laquelle je clique. 

Comment obtenir l'id du span quand on clique dessus? Comment faire cela en utilisant jQuery?

jqueryclick
18
Gourav

mettre à jour lorsque vous chargez le contenu de manière dynamique afin que vous utilisiez.

$(document).on('click', 'span', function () {
    alert(this.id);
});

ancien code

$('span').click(function(){
    alert(this.id);
});

ou vous pouvez utiliser .on

$('span').on('click', function () {
    alert(this.id);
});

this fait référence à l'élément span actuel sur lequel l'utilisateur a cliqué

this.id donnera la id de la durée actuelle cliquée

44
Tushar Gupta

Étant donné que vous chargez les étendues via ajax, vous devrez attacher des gestionnaires de délégués aux événements pour les intercepter lorsqu'ils remontent.

$(document).on('click','span',function(e){
    console.log(e.target.id)
})

vous souhaiterez associer l'événement au membre statique le plus proche possible pour améliorer l'efficacité.

$('#main_div').on('click','span',function(e){
    console.log(e.target.id)
})

est préférable à la liaison au document par exemple.

Cette question peut vous aider à comprendre

Direct vs délégué - jQuery .on ()

10
DGS

Je voulais partager comment vous pouvez utiliser cela pour modifier un attribut du bouton, car il m'a fallu un certain temps pour le comprendre ...

Par exemple, pour changer le fond en jaune:

$("#"+String(this.id)).css("background-color","yellow");
1
frankenapps

Vous pouvez obtenir l'id de celui qui a cliqué avec ce code

$("span").on("click",function(e){
    console.log(e.target.Id);
});

Utiliser l'événement .on() pour une compatibilité future

0
Hemal