jQuery .() sur l'événement de capture dynamique 'données' de l'attribut dans la liste des boutons pour passer de la valeur à une autre fonction?

J'ai un tableau dynamique liste d'environ 40 lignes chacune avec un bouton de modification contenant un champ de date.
J'ai aussi la suite cliquez sur script d'événement en essayant d'associer à chaque bouton via une classe commune, qui doit accéder à la valeur d'un attribut data - au sein de l'image du bouton code vu plus ci-dessous:

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

Exemple de l'édition des boutons qui sont générées de façon dynamique:

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

Problème:

Le script charge ok, quand le bouton modifier est cliqué, l'alerte s'affiche:
[objet HTMLImageElement] à la place des données-evalz valeur ??

Veuillez fournir des suggestions de comment je peux accéder aux données unique pour le bouton est cliqué?

OriginalL'auteur Martin Sansone - MiOEE | 2013-11-17

  1. 21

    Vous n'êtes pas à l'aide de la on fonctionner correctement. Voici une façon que vous pouvez faire ceci: VIOLON

    $('.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. Attributs de données sont sensibles à la casse, donc soyez prudent avec la façon dont vous écrivez.

    Merci pour la réponse @vape. Repérer la casse m'a fait me sentir ridicule 🙂 Votre réaction a été de près en ligne avec ce que j'étais après - +1 pour l'. Votre violon reporté mon cas-sens de l'erreur, et j'ai ajouté deux boutons image avec des données différentes pour s'assurer qu'il a travaillé. J'ai mis à Jour votre VIOLON | Hiral's solution s'exécute hors du corps", la vôtre sera plus rapide à s'exécuter dans le code si la page a un grand nombre de lignes et de contrôle ?
    Content d'avoir pu aider 🙂 je ne suis pas certain qu'on serait plus rapide. Je doute qu'il y ait autant de différence entre les deux approches. Vous devriez faire un test rapide pour comparer si la performance signifie que beaucoup de vous. Je doute que vous vous sentiriez beaucoup de différence pour les 40 lignes.
    Après le test de l'impact sur le traitement de la page, votre solution était 12ms plus rapide. resserrement de la sélection sur jQuery comme détaillé dans le lien fait clairement une grosse différence sur les grandes pages si chaque var/la fonction est capable d'être direct. Le ci-dessus bénéficient était juste sur votre petit extrait ! Excellent.
    Les 40 lignes de ce que le jQuery '.showEdt' agit, mais le code html de la page taille de rendu a plus de 1 000 lignes. C'est là la différence entre je pense.
    Cela fonctionne parfaitement pour les tables de données de la table.recharger.ajax() dans le tirage de l'événement! Bravo!

    OriginalL'auteur Taylan Aydinli

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

    Violon ici.

    Grâce Hiral pour la réponse rapide. +1 rien que pour cela. J'ai essayé à peu près une version identique de ce mais fait l'erreur de mettre des 'données' où la .l'attribut est. Une question de bien - n'ayant le code de la bulle vers le bas à partir de la balise body de faire de ce ralentissement sur un 1200 ligne de la page de code que d'identifier directement la classe".showEdt' ?
    Vous êtes les bienvenus 🙂 je ne pense pas qu'il y ait autant de différence. Je vous suggère d'essayer et de comparer les deux approches.
    J'ai fait exactement comme vous l'avez suggéré. En suivant les conseils de cet excellent article sur l'amélioration de jQuery pour la vitesse les résultats ont été très utiles: Hiral solution = direct de la durée des processus (1.935 ms) et de l'impact complet de la page (71.03 ms) || vape solution = direct de la durée des processus (1.765 ms) et de l'impact complet de la page (59.33 ms)

    OriginalL'auteur Hiral

  3. 4

    Si vous modifiez le contexte de 'ce' mot-clé à quelque chose d'autre, vous pouvez récupérer les données directement à partir de l '"événement" de l'objet 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...

    OriginalL'auteur rafaelbiten

  4. 2

    ou tout simplement à partir de l'événement

    event.target.attributes.qelemnumber.value

    OriginalL'auteur Yianni

  5. 1

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

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

    OriginalL'auteur Nik