数据属性值未在jquery var中传递[重复]
Posted
技术标签:
【中文标题】数据属性值未在jquery var中传递[重复]【英文标题】：Data attribute value is not passed in jquery var [duplicate] 【发布时间】：2019-02-04 12:21:44 【问题描述】：我有以下问题。 我从 db 生成多个数据，每个项目都有一个“删除”btn，它有一个带有条目 ID 号的“data-entryid”属性。
我想在单击垃圾桶图标时传递每个项目的数据属性，但使用当前的 js 代码我只能获得第一个条目的 id。
这是我的 html btn 代码，其中“entry-num”是从 db 生成的条目 id：
<a href="#" id="dlt-btn" data-entryid="entry-num" class="btn btn-danger delete">
<i class="far fa-trash-alt"></i>
</a>
这是我正在尝试（目前）在控制台中传递值的 js 代码：
$("#dlt-btn").click(function()
var entryId = $(this).data("entryid");
console.log(entryId);
);
【问题讨论】：
id 属性每页应该是唯一的。
哦，我明白了！感谢您的澄清！
【参考方案1】：
id全局属性定义了一个唯一标识符 (ID)，该标识符在整个文档中必须是唯一的。其目的是在链接（使用片段标识符）、脚本或样式（使用 CSS）时识别元素。
使用 class 代替 id：
$(".delete").click(function()
var entryId = $(this).data("entryid");
console.log(entryId);
);
【讨论】：
哦！有效！当我使用 id 时为什么会发生这种情况的任何解释？！ （避免再次犯同样的愚蠢错误） @HarrysR.，在文档中id 应该是唯一的。【参考方案2】：
使用 Class 而不是 Id，因为它是唯一的或生成的 id
【讨论】：
【参考方案3】：由于页面加载后正在生成数据，您应该尝试事件委托。类似的东西：
$('#someParentElement').on('click', '.deleteButtonClass', function()
var entryId = $(this).data("entryid");
console.log(entryId);
);
【讨论】：
【参考方案4】：你可以像这个使用类一样简单地使用 id 并相应地更改
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function()
$(".dlt-btn").click(function()
var entryId = $(this).data("entryid");
alert(entryId);
);
);
</script>
</head>
<body>
<a href="#" data-entryid="value" class="btn btn-danger delete dlt-btn">
<i class="far fa-trash-alt">ddd</i>
</a>
</body>
</html>
【讨论】：
【参考方案5】：如果你不想使用 class 和 id 属性。
$("a").on('click',function()
var entryId = $(this).data("entryid");
console.log(entryId);
);
【讨论】：
以上是关于数据属性值未在jquery var中传递[重复]的主要内容，如果未能解决你的问题，请参考以下文章
HTML 表单按钮值未在 Safari 和 Chrome 中发布