jQuery

Question

我有一个脚本，它附加了一段 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>`);

我正在尝试使用此代码 let musicRef = $(this).data("ref"); 获取 sessionStorage 的数据引用，但它 returns undefined。有人能告诉我为什么吗？我已经尝试过不带引号的 ${i} 了。

Answer 1

问题是你缺少 pass this context

onclick="add_to_storage()" ---> onclick="add_to_storage(this)"

function add_to_storage(event){
  var value = $(event).data('ref');
  console.log(value);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="add-music-button" data-ref="123" onclick="add_to_storage(this)">Adicionar</button>

更详细的解释

因为调用时没有设置this的值，所以this会默认为全局对象，在浏览器中是window。

阅读 this post 以了解有关 Javascript 中的 this 关键字的更多信息。

Answer 2

您正试图在 DOM

注册此元素之前使用 Javascript 函数 append() 添加 HTML

您不能为此应用正常的 onclick 事件。你必须做 Event Delegation。然后你就可以抓住那个id或class。

此事件处理程序绑定到 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>

jQuery - Data() 属性返回未定义

jQuery - Data() atrribute returning undefined

javascript

local-storage

custom-data-attribute