jQuery .auf() klicken Sie auf Ereignis abfangen dynamische "Daten -" - Attribut in der Liste der Tasten zu übergeben, Wert an eine andere Funktion?

Ich habe eine dynamische Tabelle, Liste mit rund 40 Zeilen jeweils ein edit-button mit einem Feld "Datum".
Ich habe auch die folgende click-Ereignis-Skript versucht, um zu befestigen, um jede Taste über eine gemeinsame Klasse, die Zugriff auf den Wert eines data - Attribut im Bild-Taste code gesehen, weiter unten:

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

Beispiel die edit-buttons, welche dynamisch erzeugt werden:

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

Problem:

Das Skript lädt Sie auf ok, wenn die Schaltfläche Bearbeiten angeklickt wird die Warnung angezeigt:
[Objekt HTMLImageElement] anstelle der Daten-evalz Wert ??

Bitte Vorschläge, wie ich auf die Daten zugreifen kann eindeutig auf die Schaltfläche, auf die geklickt wird?

InformationsquelleAutor Martin Sansone - MiOEE | 2013-11-17
  1. 25

    Sie sind nicht mit den on richtig funktionieren. Hier ist eine Möglichkeit, Sie dies tun können: GEIGE

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

    Beachten Sie auch, dass Sie geschrieben haben eValz statt evalz auf Ihrem code. Data-Attribute sind case-sensitive, also vorsichtig sein mit, wie Sie es schreiben.

    • Danke für die Antwort @vape. - Entdecken Sie die groß-und Kleinschreibung hat mich dumm fühle 🙂 Ihre Reaktion war so eng im Einklang mit dem, was ich war, nach - +1 für das. Ihre Geige übernommen meinem Fall-sens Fehler, und ich habe zwei Bild-Tasten mit verschiedenen Daten, um sicherzustellen, dass es funktionierte. Ich Aktualisiert Ihre GEIGE | Hiral's Lösung läuft 'Körper' - Würde deins schneller ausführen in den code, wenn die Seite hat eine Menge von Linien und Kontrollen ?
    • Froh, dass ich helfen konnte 🙂 ich bin mir nicht sicher, welche wäre schneller. Bezweifle ich, es würde viel Unterschied zwischen den beiden Ansätzen. Sollten Sie einen schnellen test, um zu vergleichen, ob die Leistung bedeutet, dass viel für Sie. Ich bezweifle, dass Sie sich fühlen würden, viel Unterschied für die 40 Zeilen wenn.
    • Nach Prüfung der Auswirkungen auf der Seite der Verarbeitung, Ihre Lösung war 12ms schneller. engere Auswahl auf jQuery, wie detailliert im link macht natürlich einen großen Unterschied, bei großen Seiten, wenn die einzelnen var/Funktion ist in der Lage, direkt zu sein. Die oben genannten Vorteile nur auf dem kleinen Schnipsel ! Ausgezeichnet.
    • Die 40 Zeilen waren das, was die jQuery '.showEdt' fungiert, sondern die html-Seite gerendert, die Größe hat über 1000 Zeilen. Dies ist, wo der Unterschied kommt in der ich denke.
    • Dies funktioniert perfekt für Datentabellen Tabelle.reload.ajax() im draw-event! Kudos!
    • Leute, bitte tun Sie das nicht. Siehe learn.jquery.com/events/event-delegation für Informationen über die Verwendung von event-delegation, die ist schneller und funktioniert auch viel besser für dynamische Daten. Hiral die Antwort ist, was Sie wollen.

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

    Geige hier.

    • Dank Hiral für die schnelle Antwort. +1 für das allein. Ich versuchte fast eine identische version dieses machte aber den Fehler, setzen 'Daten' wo die .attr ist. Eine Frage, obwohl - bedeutet, dass der code Blase nach unten aus dem body-tag machen diese langsamer auf einem 1200 line-Codepage als die zu identifizieren, die direkt die Klasse '.showEdt' ?
    • Sie sind herzlich willkommen 🙂 ich denke nicht, es wäre viel Unterschied. Ich schlage vor, Sie probieren und vergleichen beide Ansätze.
    • Ich habe genau so, wie Sie vorgeschlagen. Nach der Beratung in dieser hervorragende Artikel auf die Verbesserung der jQuery for speed die Ergebnisse waren wirklich nützlich: Hiral Lösung = direkter Prozess Zeit (1.935 ms) und volle Wirkung zu Seite (71.03 ms) || vape-Lösung = direkter Prozess Zeit (1.765 ms) und volle Wirkung zu Seite (59.33 ms)
    InformationsquelleAutor Hiral
  3. 4

    Wenn Sie den Kontext ändern, der "this" - Schlüsselwort, um etwas anderes, das Sie abrufen können, die Daten direkt aus dem 'event' - Objekt etwa so:

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

    Ich hoffe, das Beispiel oben ist klar...

    InformationsquelleAutor rafaelbiten
  4. 2

    Wenn Ihr attribute der Daten bekannt ist, können Sie es direkt mit einem Attribut-Selektor in der jQuery ist, wie dies:

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

    oder nur aus den event -

    event.target.attributes.qelemnumber.value
    InformationsquelleAutor Yianni
Schreibe einen Kommentar