Question

我正在撰写此页面：http://www.problemio.com/index_new.php

当你将鼠标放在＆＃34;健康＆＃34;链接，我弹出弹出窗口，但很难让它关闭。

以下是我为弹出窗口所做的工作：

$("<div id='pop'>" + div_contents + "</div>").dialog( { title: 'Secondary Categories'} );

以下是我试图让它关闭的方式：

$('#hea_link').mouseout(function() 
{       
    $("#pop").dialog( 'close' );                
});

$('#hea_link').mouseleave(function() 
{       
    $("#pop").dialog( 'close' );                
});

我试图让弹出窗口关闭的方式都没有。另外，我不知道为什么点击弹出窗口右上角的x并不关闭它。

知道我在这里做错了吗？

Answer 1

你有一些问题：

每次将鼠标悬停在该链接上时，都会创建另一个<div id='pop'></div>。我建议事先创建对话框并根据需要显示/隐藏/填充它：

将以下HTML添加到您的页面：

<div id='pop' style='display:none'></div>

然后当页面加载时（document.ready或类似）：

$("#pop").dialog({ autoOpen: false });

您遇到的另一个问题是查看您的代码，看起来您只传递了hover个函数。这意味着该功能将在mouseenter和mouseleave上执行。将两个函数传递给hover：

$('#hea_link').hover(function() 
{       
    $("#pop").dialog( 'open' );                
},
function () 
{
    $("#pop").dialog("close");
});

以这种方式使用悬停意味着您不需要mouseout / mouseleave事件侦听器。

示例： http://jsfiddle.net/jNq9X/

无法使用mouseleave（）或mouseout（）在jQuery中工作

1 个答案: