1

我需要一点帮助......我有这个代码：

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

id歌词和歌词关闭是隐藏的。我基本上想要一个显示歌词的覆盖 div，顶部有一个关闭按钮，右侧。因此，使用 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();
        });
    });
})

点击时：

工作正常，但是，只是有时。第一次点击完美，第二次歌词关闭 div 消失并且不显示。第三次又OK，第四次KO，...

我想我的 jQuery 代码出了点问题……不知道它是什么……

谢谢！

4

2 回答 2

0

如果您使用 jQuery >= 1.7，请使用以下委托：

$('[id^=showContent]').click(function(e) {

改成：

$(document).on("click","[id^=showContent]",function(e){

...这并不能回答问题，但鉴于此处的信息，应该可以解决问题。而不是 $(document)，我通常更喜欢一个内部容器，但它包含触发点击事件的元素。

于 2012-09-11T17:25:26.217 回答
0

你不断地重新绑定hover和mouseleave事件。当hover事件调用toggle它时，它会为每个绑定调用它，从而模拟先前的执行。

  • 第二次显示，隐藏
  • 第三次显示，隐藏，显示
  • 第四次它显示，隐藏，显示，隐藏

在重新绑定之前取消绑定事件应该可以修复它。

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

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

另外，由于您已经设置了显示值#lyrics .show()是多余的。

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

演示- 在重新绑定之前取消绑定

于 2012-09-11T17:40:29.117 回答