jquery - 如何在 Jquery 中访问锚标记的数据属性？

Question

案例 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. 为什么数据属性在案例 1 中无法访问/未定义，并且只能在案例 2 中访问？
2. 在案例 1 中如何访问锚元素的数据属性？

Answer 1

情况1：

<a href='#' onclick='modifyCustomerDetails(this)' data-action='modifyCustAction' data-params='customerId=567'>Modify Customer</a>

function modifyCustomerDetails(obj) {
    console.log("ACTION::"+$(obj).attr('data-action')) ;  
    console.log("PARAMS::"+$(obj).attr('data-params')) ;          
}

Answer 2

案例 1通过this内部函数

<a href='#' onclick='modifyCustomerDetails(this)' 
data-action='modifyCustAction' data-params='customerId=567'>Modify Customer</a>

function modifyCustomerDetails(currObj) {
    var srcEl = $(currObj); 
    console.log("ACTION::"+srcEl.data('action')) ;  
    console.log("PARAMS::"+srcEl.data('params')) ;          
}

Answer 3

添加id= "modify_customer"到您的锚标记

并使用这个 jquery 代码

<a href="#" onclick="modifyCustomerDetails()" 
data-action="modifyCustAction" 
data-params="customerId=567" 
id="modify_customer"> Modify Customer</a>

$(function(){ 
var a = $("#modify_customer").data('params')
alert(a)
});

它会给出结果customerId=567

Answer 4

我不清楚你的问题，但我认为你想要这个

$('a').click(function(){
var propty= $(this); 
var action =propty.attr("data-action");
});