jQuery .on() событие щелчка, перехватывающее динамический атрибут data- в списке кнопок, чтобы передать значение другой функции?

Question

У меня есть динамический список таблиц, содержащий около 40 строк, каждая с кнопкой редактирования, содержащей поле даты.У меня также есть следующий сценарий события клика, который пытается прикрепить к каждой кнопке через общий класс, которому необходимо получить доступ к значению атрибута data- в коде изображения кнопки, как показано ниже:

$('.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)" />

Проблема:

Сценарий загружается нормально, при нажатии кнопки редактирования отображается предупреждение:[объект HTMLImageElement] вместо значения data-evalz ??

Предложите, пожалуйста, как я могу получить доступ к данным, уникальным для нажатой кнопки?

Answer 1

Вы не используете on функционировать правильно.Вот один из способов сделать это: СКРИПКА

$('.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"));
});

Fiddle here.

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