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

Question

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

Answer 1

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

Fiddle here.

Answer 2

You're not using the on function 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.

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