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

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

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

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

问题：

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

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

Answer 1

您没有正确使用onfunction。 这是你可以做到这一点的一种方式： 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")); }); 

在这里小提琴。

Answer 3

如果您要将“this”关键字的上下文更改为其他内容，则可以直接从“event”对象检索数据，如下所示：

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

我希望上面的例子很清楚……

Answer 4

或者仅仅来自活动

 event.target.attributes.qelemnumber.value 

Answer 5

如果您的数据属性是已知的，您可以直接使用jQuery中的属性选择器来执行此操作，如下所示：

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