jQuery .on()单击事件捕获按钮列表中的动态'data-'属性以将值传递给其他函数？

Question

我有一个大约40行的动态表列表,每个行都有一个包含日期字段的编辑按钮.我还有以下单击事件脚本尝试通过公共类附加到每个按钮,该公共类需要访问按钮图像代码中的数据属性的值,如下所示:

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

动态生成的编辑按钮示例:

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

问题:

该脚本加载正常,当单击编辑按钮时,警报显示:[object HTMLImageElement]而不是data-evalz值？

请提供有关如何访问所单击按钮的唯一数据的建议？

Answer 1

您没有on正确使用该功能.这是你可以做到这一点的一种方式:FIDDLE

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

另外,请注意您已编写eValz而不是evalz代码.数据属性区分大小写,因此请务必小心编写它们.

Answer 2

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