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

编程问答 2022-05-28

问题描述

我有一个脚本可以将一段 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 的数据引用，但它返回 undefined。有人能告诉我为什么吗？我已经尝试过将 ${i} 放在不带引号的位置。

解决方法

问题是您缺少 pass this 上下文

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 关键字的更多信息。

,

在此元素被 DOM 注册之前，您正在尝试使用 HTML 函数 Javascript 添加 append()

您不能为此应用正常的 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>

custom-data-attributejavascriptjquerylocal-storage