jQuery .on() 单击事件捕获按钮列表中的动态“data-”属性以将值传递给其他函数？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20028100/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery .on() click event catching dynamic 'data-' attribute in list of buttons to pass value to other function?
提问by Martin Sansone - MiOEE
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:
我有一个大约 40 行的动态表列表，每行都有一个包含日期字段的编辑按钮。我还有以下点击事件脚本试图通过一个公共类附加到每个按钮，该类需要访问下面进一步看到的按钮图像代码中数据属性的值：
$('.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 ??
脚本加载正常，当单击编辑按钮时，警报显示：[object HTMLImageElement] 而不是 data-evalz 值 ??
Please provide suggestions of how I can access the data unique to the button that is clicked?
请提供有关如何访问所单击按钮独有数据的建议？
回答by Taylan Aydinli
You're not using the onfunction correctly. Here's one way you can do this: FIDDLE
您没有on正确使用该功能。这是您可以执行此操作的一种方法：FIDDLE
$('.showEdt').each(function () {
var $this = $(this);
$this.on("click", function () {
alert($(this).data('evalz'));
});
});
Also, notice you've written eValzinstead of evalzon your code. Data attributes are case-sensitive so be careful with how you write them.
另外，请注意您写的是eValz而不是evalz在您的代码上。数据属性区分大小写，因此请注意编写它们的方式。
回答by Hiral
$("body").on("click",".showEdt",function(){
alert($(this).attr("data-evalz"));
});
回答by rafaelbiten
If you're changing the context of 'this' keyword to something else, you can retrieve the data directly from the 'event' object like so:
如果您将 'this' 关键字的上下文更改为其他内容，您可以直接从 'event' 对象中检索数据，如下所示：
$('element').on('click', function(event) {
// 'this' here = externalObject
this.fnFromExternalObject($(event.currentTarget).data('activate'));
}.bind(externalObject));
I hope the example above is clear...
我希望上面的例子很清楚......
回答by Nik
If your data attribute is known, you can do it directly with an attribute selector in jQuery, like this:
如果您的数据属性是已知的，您可以直接使用 jQuery 中的属性选择器来完成，如下所示：
$(document).on('click', "[data-attribute]", function() {
// Do your tricks here...
});
回答by Yianni
or just from the event
或者只是从事件中
event.target.attributes.qelemnumber.value
