jQuery : Hide dynamically generated element

Hi,

I want to hide dynamically generated element that has a specific class because it only needs to be activated with a hover.

Here’s my scenario.

$('.userprofile').hide(); // I hide it when the page is loaded, but it doesn't work on a dynamically generated .userprofile class.
$(".onhoverprofile").hover(function () {
    $(this).parent().next().fadeIn(500);
});
$('.userprofile').mouseleave(function () {
    $(this).fadeOut(500);
});

EDIT : It turns out hover doesn’t work with on, so I had to use someting like below.

    var body = $('body');
    body.on('mouseover', '.onhoverprofile', (function () {
        $(this).parent().next().fadeIn(500);
    }));
    body.on('mouseleave', '.userprofile', (function() {
        $(this).fadeOut(500);
    }));

Just put the “hide” in the css, something like:

.userprofile {
  display: none;
}

That way you know it won’t be active until someone hovers over it.
An you can always have an id be the initial profile if you wanted to.

#userprofile {
  display: block;
}
1 Like

Thanks, it works. :smile:

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.