Martin Sansone - MiOEE Martin Sansone - MiOEE - 1 month ago 13
jQuery Question

jQuery .on() click event catching dynamic 'data-' attribute in list of buttons to pass value to other function?

I have a dynamic table list of around 40 rows each with an edit button containing a date field.
I also have the following click event script trying to attach to each button via a common class which needs to access the value of a data- attribute within the button image code seen further below:

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


Example of the edit buttons which are dynamically generated:

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


Problem:



The script loads ok, when the edit button is clicked the alert displays:
[object HTMLImageElement] instead of the data-evalz value ??

Please provide suggestions of how I can access the data unique to the button that is clicked?

Answer

You're not using the on correctly. Here's one way you can do this: FIDDLE

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

Also, notice you've written eValz instead of evalz on your code. Data attributes are case-sensitive so be careful with how you write them.