CASE 1 :アンカー要素の 'onclick' 属性を使用して呼び出される関数
<a href='#' onclick='modifyCustomerDetails()' data-action='modifyCustAction' data-params='customerId=567'>Modify Customer</a>
function modifyCustomerDetails() {
var srcEl = $(this);
console.log("ACTION::"+srcEl.data('action')) ;
console.log("PARAMS::"+srcEl.data('params')) ;
}
ブラウザコンソールの出力は
undefined
undefinedです
ケース 2 : jquery を使用したアンカー要素のバインド
$('a').bind('click', function() {
var srcEl = $(this);
console.log("ACTION::"+srcEl.data('action')) ;
console.log("PARAMS::"+srcEl.data('params')) ;
})
ブラウザ コンソールの出力
modifyCustAction
customerId=567
jQueryがコールバック関数のスコープをコールバックの対象である要素に設定することを読みました。
- ケース 1 でデータ属性にアクセスできない/未定義であり、ケース 2 でのみアクセスできるのはなぜですか?
- ケース1でアンカー要素のデータ属性にアクセスする方法は?