jQuery .ON () 버튼 목록에서 동적 '데이터 -'속성을 클릭하여 다른 기능에 값을 전달하는 이벤트를 클릭합니까?

Question

DATE 필드가 포함 된 편집 버튼을 가진 약 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)" />

.

문제점 :

스크립트는 편집 버튼을 클릭하면 경고가 표시됩니다. [객체 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"));
});

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