我需要再次帮助......我有这个代码:
<div id="lyrics">
<div id="lyricsClose"></div>
<div id="ajax-content"></div>
</div>
隐藏id 歌词和lyricsClose 。我基本上想要一个显示歌词的叠加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();
});
});
})
点击:
工作正常,但有时候。第一次点击工作完美,第二次lyrics关闭div消失,并没有显示。第三次OK,第四次KO,......
我认为我的jQuery代码出了问题...无法理解它是什么......
谢谢!
答案 0 :(得分:0)
如果您使用的是jQuery&gt; = 1.7,请使用以下委托:
$('[id^=showContent]').click(function(e) {
更改为:
$(document).on("click","[id^=showContent]",function(e){
...这不回答问题,但鉴于此处的信息,应该解决问题。我通常更喜欢内部容器,而不是$(文档),而是包含触发click事件的元素。
答案 1 :(得分: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