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>
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>
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>
Delete
</button>
jQuery
$("document").on("click",".handleClick",function(evnt){
var curName = $(evnt.target).data('curname'); // use $(id)
console.log(curName);
})