jquery - OnClickイベントの要素属性を読み取ります

Question

HTML要素があり、OnClickイベントのデータ属性を読み取りたい

<a id="downloadFile" class="btn btn-success" href="javascript:;" data="MyData">Download file</a>

以下のコードを使用する場合は、A要素ではなくhrefatributeを参照してください。A要素を参照してデータ値を読み取る方法は？

 $('#downloadFile').click(function() {            
  alert(this.attr('data')); //I get error that 'href' do not has 'data' attribute, this code refers to href attribute and not to A element
});

Answer 1

イベントハンドラーのコンテキストではthis、jQueryオブジェクトではなく、DOM要素を参照します。関数を使用$(this)できるように、jQueryオブジェクトを取得するために使用します。attr

$('#downloadFile').click(function() {            
  alert($(this).attr('data'));
});

別のオプションはを使用することthis.getAttribute("data")です。

デモ。

Answer 2

カスタムデータ属性を使用して、次のように区切ることができます-

ライブデモ

<a id="downloadFile" class="btn btn-success" href="javascript:;" data-yourhref="MyData">Download file</a>   

     $('#downloadFile').click(function() {            
        alert($(this).data('yourhref')); //Get error that href do not has data atribute, this refered to href atribute and not to A element
    });​

Answer 3

これを使用してjsオブジェクトを参照していますが、jquery構文を使用しています。

試す：

$(this).attr('href')

Answer 4

Jqueryの適切なセレクターのこれのみを変更してください

$('#downloadFile').click(function() {            
          alert($('#downloadFile').attr('data')); //Get error that href do not has data atribute, this refered to href atribute and not to A element
        });