JQuery .on () Fare clic su Eventi Attributo Dynamic Dynamic 'Data-' nell'elenco dei pulsanti per passare valore ad altre funzioni?

Question

Ho una tabella dinamica elenco di circa 40 righe ciascuna con un pulsante di modifica contenente un campo di data. Ho anche il seguente tipo di script di eventi che cerca di allegarsi a ciascun pulsante tramite una classe comune che deve accedere al valore di un attributo dati all'interno del pulsante Codice immagine visto ulteriormente sotto:

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

.

Esempio dei pulsanti di modifica generati dinamicamente:

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

.

Problema:

Lo script carica OK, quando si fa clic sul pulsante Modifica, i display Alert: [Object htmlimageelement] invece del valore di Data-Evalz ??

Si prega di fornire suggerimenti su come posso accedere ai dati univoci al pulsante in cui si fa clic?

Answer 1

Non stai usando correttamente la funzione on.Ecco un modo in cui puoi fare questo: Fiddle

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

.

Inoltre, avviso che hai scritto eValz anziché evalz sul tuo codice.Gli attributi dei dati sono sensibili al maiuscolo / minuscolo, quindi fai attenzione a come le scrivi.

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