web-dev-qa-db-ja.com

jQuery .on（）クリックイベントがボタンのリストの動的な 'data-'属性をキャッチして、他の関数に値を渡しますか？

約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)" />

問題：

編集ボタンをクリックすると、スクリプトが正常にロードされ、アラートが表示されます。data-evalz値の代わりに[object HTMLImageElement] ??

クリックされたボタンに固有のデータにアクセスする方法を教えてください。

jquerydata-bindingreturn-valueonclicklistener
13
Martin Sansone - MiOEE

on関数を正しく使用していません。これを行う方法の1つを次に示します。 [〜＃〜] fiddle [〜＃〜]

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

また、コードにeValzではなくevalzを記述したことにも注意してください。データ属性では大文字と小文字が区別されるため、それらの記述方法には注意してください。

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

ここでフィドル。

5
Hiral

「this」キーワードのコンテキストを別のものに変更する場合は、次のように「event」オブジェクトから直接データを取得できます。

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

上記の例が明確であることを願っています...

4
rafaelbiten

データ属性がわかっている場合は、次のようにjQueryの属性セレクターで直接行うことができます。

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

またはちょうどイベントから

event.target.attributes.qelemnumber.value
2
Yianni