How to hover over data inserted from JSON-CodePudding

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.

CodePudding user response：

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>