jQuery可以't获取data-*属性值，返回undefined

jQuery can't get data-* attribute value, return undefined

本文关键字：属性 undefined 返回 data- 获取 可以 jQuery      更新时间：2023-09-26

Sup，我在使用jQuery获取data-*值时遇到问题。

我的HTML代码是：

<button type="button" 
   class="btn btn-danger"
   id="{{ currency.id }}"
   data-curname="{{ currency.name }}"
   data-toggle="modal"
   data-target="#deleteConfirm"
   onclick="deleteCurConf(this.id)">
   <span class="glyphicon glyphicon-remove"></span>
   &nbsp;Delete
 </button>

jQuery是：

function deleteCurConf(id) {
 var curName = $('#' + id).data('curname');
 console.log(curName);
}

但控制台日志返回未定义。最有趣的是，这个代码昨天还在工作，但今天坏了。知道吗？

顺便说一句，我正在使用Bootstrap3和Twig

需要两个小的更改：

1） 调用函数时只传递this而不是this.id

<button type="button" 
   class="btn btn-danger"
   id="{{ currency.id }}"
   data-curname="{{ currency.name }}"
   data-toggle="modal"
   data-target="#deleteConfirm"
   onclick="deleteCurConf(this)">
   <span class="glyphicon glyphicon-remove"></span>
   &nbsp;Delete
</button>

2） 功能中：

function deleteCurConf(id) {
 var curName = $(id).data('curname'); // use $(id)
 console.log(curName);
}

在jQuery中更干净的方法是：

   <button type="button" 
   class="btn btn-danger handleClick"  // Added extra class
   id="{{ currency.id }}"
   data-curname="{{ currency.name }}"
   data-toggle="modal"
   data-target="#deleteConfirm"       
   <span class="glyphicon glyphicon-remove"></span>
   &nbsp;Delete
 </button>

jQuery

$("document").on("click",".handleClick",function(evnt){
 var curName = $(evnt.target).data('curname'); // use $(id)
 console.log(curName);
})
相关文章：