web-dev-qa-db-fra.com

jQuery .on () click event capturant l'attribut 'data-' dynamique dans la liste des boutons pour transmettre la valeur à une autre fonction?

J'ai une liste de table dynamique d'environ 40 lignes chacune avec un bouton d'édition contenant un champ de date. J'ai également le script d'événement de clic suivant qui tente de s'attacher à chaque bouton via une classe commune qui doit accéder à la valeur d'un attribut de données dans le code de l'image du bouton, comme indiqué ci-dessous:

$('.showEdt').each(function () {
   var $this = $(this);
   $(this).on("click",$this.data('eValz'), function () {
          alert(this);
   });
 });

Exemple de boutons d'édition générés dynamiquement:

<img src="edit.png" title="edit" class="showEdt" data-evalz="(eyCKeVua/TNF117)" />

Problème:

Le script se charge correctement. Lorsque vous cliquez sur le bouton Éditer, l'alerte affiche: [objet HTMLImageElement] au lieu de la valeur data-evalz ??

Veuillez indiquer comment je peux accéder aux données propres au bouton sur lequel vous avez cliqué.

jquerydata-bindingreturn-valueonclicklistener
8
Martin Sansone - MiOEE

Vous n'utilisez pas la fonction on correctement. Voici une façon de procéder: FIDDLE

$('.showEdt').each(function () {
    var $this = $(this);
    $this.on("click", function () {
        alert($(this).data('evalz'));
    });
});

Notez également que vous avez écrit eValz au lieu de evalz sur votre code. Les attributs de données sont sensibles à la casse, alors soyez prudent avec leur écriture.

19
Taylan Aydinli
$("body").on("click",".showEdt",function(){
    alert($(this).attr("data-evalz"));
});

Fiddle ici.

5
Hiral

Si vous modifiez le contexte du mot clé 'this' en un autre, vous pouvez récupérer les données directement à partir de l'objet 'event', comme suit:

$('element').on('click', function(event) {
    // 'this' here = externalObject
    this.fnFromExternalObject($(event.currentTarget).data('activate'));
}.bind(externalObject));

J'espère que l'exemple ci-dessus est clair ...

4
rafaelbiten

ou juste de l'événement

event.target.attributes.qelemnumber.value
2
Yianni

Si votre attribut de données est connu, vous pouvez le faire directement avec un sélecteur d'attribut dans jQuery, comme ceci:

$(document).on('click', "[data-attribute]", function() {
    // Do your tricks here...
});
1
Nik