jQuery .on() klicken Sie auf das Ereignis, das das dynamische „Daten“-Attribut in der Liste der Schaltflächen abfängt, um einen Wert an eine andere Funktion zu übergeben?

Question

Ich habe eine dynamische Tabellenliste mit jeweils etwa 40 Zeilen und einer Schaltfläche zum Bearbeiten, die ein Datumsfeld enthält.Ich habe außerdem das folgende Click-Event-Skript, das versucht, jede Schaltfläche über eine gemeinsame Klasse anzuhängen, die auf den Wert eines Datenattributs innerhalb des weiter unten gezeigten Schaltflächenbildcodes zugreifen muss:

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

Beispiel für die Bearbeitungsschaltflächen, die dynamisch generiert werden:

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

Problem:

Das Skript wird ordnungsgemäß geladen. Wenn Sie auf die Schaltfläche „Bearbeiten“ klicken, wird die Warnung angezeigt:[object HTMLImageElement] anstelle des data-evalz-Werts ??

Bitte machen Sie Vorschläge, wie ich auf die Daten zugreifen kann, die für die angeklickte Schaltfläche eindeutig sind.

Answer 1

Du verwendest das nicht on korrekt funktionieren.Hier ist eine Möglichkeit, dies zu tun: GEIGE

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

Beachten Sie auch, dass Sie geschrieben haben eValz anstatt evalz auf Ihrem Code.Bei Datenattributen muss die Groß-/Kleinschreibung beachtet werden. Seien Sie daher beim Schreiben vorsichtig.

Answer 2

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

Fiddle here.

Answer 3

If you're changing the context of 'this' keyword to something else, you can retrieve the data directly from the 'event' object like so:

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

I hope the example above is clear...

Answer 4

If your data attribute is known, you can do it directly with an attribute selector in jQuery, like this:

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

Answer 5

or just from the event

event.target.attributes.qelemnumber.value