Jquery function not working

I have DIV with class that when I click on it…the class name changes succesfully.

I now want to hover or mouseover the DIV to display HTML text inside div = tooltip

The tooltip displays well initially but once I change the class name…the tooltip for the second portion inside the function wont display the new tooltip.

 $(function() {
        $('.list-current').mouseover(function() {
               $('#tooltip').css('visibility', 'visible');
                 $('#tooltip').html('Previous Lessons');

  $('.list-current').mouseout(function() {
    $('#tooltip').css('visibility', 'hidden');
  $('.list-done').mouseover(function() {
        $('#tooltip').css('visibility', 'visible');
        $('#tooltip').html('Back To Lessons');

You have ventured into the realm of Delegated Events.
JQuery provide an explanation and example of this.

Thanks for the link and I read through it but not sure how this applies and to fix my problem

.list-done does not exist when the page is created. So your mouseover cannot bind to it.

Reread the link.

yes that is correct and how I understand the problem. I will reread and try to work it out

The problem is that the elements don’t exist at the time that the methods are called. Instead of:


try instead listening on a parent element and delegating the event downward…something like:

$('body').on('mouseover', '.list-done', function () {})
1 Like

Thank you!! That worked!

1 Like