I have a file where I take information from a JSON and insert it into a div:
document.getElementById('display_area').innerHTML += "<p>" + jsonData[obj]["name"] + "</p>";
I want to be able to hover over this data and fade it out, so I have:
$( "p" ).hover(function() {
$( "p" ).fadeOut( 100 );
});
The problem is, it doesn't recognize it as a p, so it doesn't do anything.
You can append your json data and then add hover dynamically.
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>