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


Est-il possible 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 sûr que le var test devrait 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 second formulaire.


833
2017-09-07 08:09


origine


Réponses:


En jQuery event.target se réfère toujours à l'élément qui a déclenché l'événement, où 'event' est le paramètre transmis à la fonction. http://api.jquery.com/category/events/event-object/

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

Notez aussi que 'this' fonctionnera également, mais que ce n'est pas un objet jQuery, donc si vous souhaitez utiliser une fonction jQuery, vous devez vous y référer '$(this)', par exemple.:

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

1138
2017-09-07 19:02



Pour référence, essayez ceci! Ça marche!

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

147
2017-09-02 08:01



Bien que cela soit mentionné dans d'autres posts, je voulais l'épeler:

$(event.target).id est indé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 est indéfini.

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

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


78
2017-11-06 13:38



Pour tous les événements, ne se limite pas à jQuery, vous pouvez utiliser

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

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.


69
2017-07-19 14:23



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

'this' est un DOM élément lorsque vous êtes à l'intérieur d'une fonction de rappel (dans le contexte de jQuery), par exemple, être appelé par les méthodes click, each, bind, etc.

Voici où vous pouvez en apprendre plus: http://remysharp.com/2007/04/12/jquerys-this-demystified/


58
2017-09-07 08:12



Je génère une table dynamiquement sur une base de données, recevoir les données dans JSON et le mettre dans une table. Chaque rangée de table a un 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);  
});

25
2017-09-12 14:14



Élément qui a déclenché l'événement que nous avons dans un événement propriété

event.currentTarget

On a Noeud DOM objet sur lequel a été défini gestionnaire d'événements.


Nœud le plus imbriqué qui a commencé à bouillonner processus que nous avons dans

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/


14
2017-10-14 13:04



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 été affectée. Peut être utile lorsque l'événement click est sur un objet parent EG.un événement de clic sur une ligne de table, et vous avez besoin de la cellule sur laquelle vous avez cliqué

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

10
2018-03-22 15:41



Vous pouvez essayer d'utiliser:

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

7
2017-11-03 17:40