web-dev-qa-db-fra.com

Obtenir l'élément clicked en utilisant jQuery on event?

J'utilise le code suivant pour détecter quand un bouton généré dynamiquement est cliqué.

$(document).on("click",".appDetails", function () {
    alert("test");
});

Normalement, si vous venez de faire $('.appDetails').click(), vous pouvez utiliser $(this) pour obtenir l'élément sur lequel vous avez cliqué. Comment pourrais-je accomplir ceci avec le code ci-dessus?

Par exemple:

$(document).on("click",".appDetails", function () {
    var clickedBtnID = ??????
    alert('you clicked on button #' + clickedBtnID);
});
jqueryevent-handlingclickjquery-events
64
Scott Beeson

Aussi simple que cela puisse être

Utilisez $(this) ici aussi

$(document).on("click",".appDetails", function () {
   var clickedBtnID = $(this).attr('id'); // or var clickedBtnID = this.id
   alert('you clicked on button #' + clickedBtnID);
});
79
bipen

Le paramètre d'événement de votre fonction est manquant.

$(document).on("click",".appDetails", function (event) {
    alert(event.target.id);
});
35
Bastian Rang

La manière conventionnelle de gérer cela ne fonctionne pas bien avec ES6. Vous pouvez le faire à la place:

$('.delete').on('click', event => {
  const clickedElement = $(event.target);

  this.delete(clickedElement.data('id'));
});

Notez que la cible de l'événement sera l'élément sur lequel vous avez cliqué, mais que ce ne soit peut-être pas l'élément souhaité (il peut s'agir d'un enfant qui a reçu l'événement). Pour obtenir l'élément réel:

$('.delete').on('click', event => {
  const clickedElement = $(event.target);
  const targetElement = clickedElement.closest('.delete');

  this.delete(targetElement.data('id'));
});
19
waffleau