Question

I need a bit of help again… I have this code:

<div id="lyrics">
    <div id="lyricsClose"></div>
    <div id="ajax-content"></div>
</div>

id lyrics and lyricsClose are hidden. I basically want an overlayed div that shows lyrics, with a close button on the top, right. So, with jQuery:

$(document).ready(function() {
$('[id^=showContent]').click(function(e) {
    e.preventDefault(); // Prevent link acting as link
    $("body").append("<div id='lyricsOverlay'></div>");
    $("#lyricsOverlay").height($(document).height());
    $('#lyrics').css("display", "table"); 
        $('#lyrics').hover(function() {
            $('#lyricsClose').toggle();
        });         
        $('#lyrics').mouseleave(function() {
            $('#lyricsClose').css("display", "none");
        });
    $('#lyrics').show(); // Show content layer
    $('#lyricsOverlay').click(function() { 
            $('#lyrics').hide();
            $('#lyricsOverlay').remove();
        });     
    $('#lyricsClose').click(function() { 
            $('#lyrics').hide();
            $('#lyricsOverlay').remove();
        });
    });
})

When clicking:

Works fine, BUT, only sometimes. First time clicking works perfectly, second time lyricsClose div dissapears and does not show. Third time OK again, fourth KO, …

I suppose something is wrong in my jQuery code… Can’t se what it is…

Thanks!

Answer 1

You are constantly re-binding the hover and mouseleave events.
As the hover event calls toggle it calls it for every binding, couter-acting the previous execution.

• Second time it shows, hides
• Third time it shows, hides, shows
• Fourth time it shows, hides, shows, hides

Unbinding the events before re-binding should fix it.

$('#lyrics').unbind("hover").hover(function() {
    $('#lyricsClose').toggle();
});

$('#lyrics').unbind("mouseleave").mouseleave(function() {
    $('#lyricsClose').css("display", "none");
});

Also, as you already set the display value of #lyrics .show() is redundant.

/// not needed because as soon as you set above display to table it becomes visible
$('#lyrics').show(); // Show content layer

DEMO – Unbind before re-binding