如何将鼠标悬停在从 JSON 插入的数据上

Question

我有一个文件，我从 JSON 中获取信息并将其插入 div:

document.getElementById('display_area').innerHTML += "<p>" + jsonData[obj]["name"] + "</p>";

我希望能够将鼠标悬停在这些数据上并将其淡出，所以我有：

$( "p" ).hover(function() {
    $( "p" ).fadeOut( 100 );
  });

问题是，它没有将它识别为 p，所以它什么也没做。

Answer 1

您可以附加 json 数据，然后动态添加悬停。

var jsonData = { obj : { name : "ARIA Meyer"} }

$(document).ready(function() {
    $("#display_area").append(`
    <p>${jsonData['obj']["name"]}</p>
    `);
    
    $( "p" ).hover(function() {
    $( "p" ).fadeOut(500);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<div id="display_area"></div>

如何将鼠标悬停在从 JSON 插入的数据上

How to hover over data inserted from JSON

html

javascript

jquery

json