Jquery function not working

[henk3]

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');
  });
  }

[m_hutley]

@henk3

once I change the class name

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

[henk3]

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

[m_hutley]

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

Reread the link.

[henk3]

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

[labofoz]

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

$('.list-done').mouseover

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

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

[henk3]

Thank you!! That worked!

@labofoz

$(‘body’).on(‘mouseover’, ‘.list-done’, function () {})