我有一个脚本，可以附加一段 HTML 10 次
$('#main').append(`
<div id="box${i}" class="divMusica">
<div class="todas">
<img id= "img${i}" src="">
</div>
<div class="divTexto">
<h2>Nome da banda: <p id="banda${i}"></p></h2>
<h2>Nome da música: <p id="musica${i}"></p></h2>
<a class="referencia" id ="url${i}" href="" target="_blank" class="button">Ir para last.fm </a>
<button button type="button" class="add-music-button" data-ref="${i}" onclick="add_to_storage()">Adicionar</button>
</div>
</div>`);
我正在尝试使用此代码将数据引用获取到 sessionStorage let musicRef = $(this).data("ref"); 但它返回 undefined.有人能告诉我为什么吗？我已经尝试将 ${i} 也放在不带引号的位置。
最佳答案
您正尝试在 DOM 注册此元素之前使用 Javascript 函数 append() 添加 HTML
您无法为此应用正常的 onclick 事件。您必须进行事件委托(delegate)。然后您将能够捕获它的 id 或 class。
此事件处理程序绑定(bind)到 DOM 树(在本例中为文档)上方的元素，并且当事件到达源自与选择器匹配的元素的该元素时将执行。
请参阅此答案以了解其中的区别。 Link
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="main"></div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
let i = 1;
$('#main').append(`
<div id="box${i}" class="divMusica">
<div class="todas">
<img id= "img${i}" src="">
</div>
<div class="divTexto">
<h2>Nome da banda: <p id="banda${i}"></p></h2>
<h2>Nome da música: <p id="musica${i}"></p></h2>
<a class="referencia" id ="url${i}" href="" target="_blank" class="button">Ir para last.fm </a>
<button button type="button" class="add-music-button" data-ref="${i}" id="clickButtonID${i}">Adicionar</button>
</div>
</div>`);
$(document).on('click', '#clickButtonID' + i, function(){
alert($(this).data("ref"));
})
</script>
</body>
</html>关于javascript - jQuery - Data() 属性返回未定义，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/65964587/