Obtenir L'ID de l'élément qui a déclenché un événement

pour référence, essayez ceci! Il fonctionne!

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

bien qu'il soit mentionné dans d'autres Billets, 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 aussi l'attribut id.

this.id donne l'attribut id.

et

$(this).id n'est pas défini.

Les différences, bien sûr, est entre jQuery objets et objets DOM. "id" est une propriété DOM donc vous devez être sur L'objet DOM element pour l'utiliser.

(Il a trébuché moi, il est donc probablement trébucher quelqu'un d'autre)

Pour tous les événements, pas seulement jQuery vous pouvez utiliser

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

Où event.target échoue il retombe sur event.srcElement pour IE. Pour clarifier le code ci-dessus ne nécessite pas jQuery mais fonctionne également avec jQuery.

Vous pouvez utiliser (this) pour faire référence à l'objet qui a déclenché la fonction.

'this' est un élément DOM lorsque vous êtes à l'intérieur d'une fonction de rappel (dans le contexte de jQuery), par exemple, étant appelé par le clic, chaque, bind, etc. méthode.

pour en savoir plus: http://remysharp.com/2007/04/12/jquerys-this-demystified/

je génère une table dynamiquement sur une base de données, recevoir les données dans JSON et de le mettre dans une table. Chaque rang de table a obtenu un unique ID , qui est nécessaire pour les actions futures, 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'Élément qui fait feu de l'événement que nous avons dans la événement propriété

event.currentTarget

Nous avons nœud DOM objet sur lequel a été fixé un gestionnaire d'événement.

noeud le plus imbriqué qui a commencé le processus de barbotage que nous avons dans

event.target

objet Événement est toujours le premier attribut de gestionnaire d'événements, par exemple:

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

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

});

plus d'informations à propos de event delegation vous pouvez lire dans http://maciejsikora.com/standard-events-vs-event-delegation /

l'élément source en tant qu'objet jQuery doit être obtenu par

var $el = $(event.target);

cela vous donne la source du clic, plutôt que l'élément que la fonction de clic a été assignée aussi. Peut être utile lorsque l'événement de clic est sur un objet parent Par exemple.un événement de clic sur une rangée 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 des gestionnaires d'événements délégués, où 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 trouverez plus que probable que itemId est undefined , car le contenu du LI est enveloppé dans un <span> , ce qui signifie que le <span> sera probablement la cible de l'événement. Vous pouvez contourner cela avec un petit chèque, comme cela:

$(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 aussi éviter la répétition inutile d'appels d'emballage 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énement, la méthode .is() est inestimable pour vérifier que votre cible d'événement (entre autres choses) est réellement ce que vous avez besoin qu'il soit. Utilisez .closest(selector) pour rechercher L'arbre DOM, et utilisez .find(selector) (généralement couplé avec .first() , comme dans .find(selector).first() ) pour chercher en bas. Vous n'avez pas besoin d'utiliser .first() quand en utilisant .closest() , comme il renvoie seulement le premier élément ancêtre correspondant, tandis que .find() renvoie tous les descendants correspondants.

utiliser peut utiliser .sur l'événement

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

Travail JSFiddle ici .

cela fonctionne sur un plus haut 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 id de l'élément (dans cet exemple li ). Aussi lorsque cliqué sur un élément enfant du parent..

this.element.attr("id") fonctionne très bien avec IE8.

ces deux travaux,

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

et

alert(this.id);

il suffit D'utiliser la this référence

$(this).attr("id")

ou

$(this).prop("id")

Vous pouvez utiliser la fonction pour obtenir l'id 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));
                   }
               );