我有一些代码在链接上有一个jquery工具提示。单击该链接时,将打开一个对话框。关闭对话框时,工具提示会自动重新出现,然后停止工作。这发生在Waterfox 18和IE8中。我没有配备最新FF的计算机进行测试,但它似乎在Chrome中运行正常。
提出了一个例子有什么想法吗?这是一个jquery / jqueryui错误吗?代码是:
<html>
<head>
<title>Test Tooltip</title>
<link type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
</head>
<body>
<ol>
<li>Mouse over the test link - the "test tooltip" jquery tooltip should appear</li>
<li>Click the link - the dialog should pop up</li>
<li>Move the mouse away - the tooltip should disappear</li>
<li>Close the dialog - the dialog should close <strong>but the tooltip also re-appears</strong></li>
<li>Click anywhere on the page - the tooltip disappears</li>
<li>Mouseover the test link - <strong>the tooltip no longer appears</strong></li>
</ol>
<a title="" class="tttest" href="javascript:void(0)">Test Link</a>
<script language='javascript'>
$(document).ready(function() {
$(".tttest").tooltip({ content: "Test Tooltip" });
$('.tttest').on('click', function() {
$('<div></div>').html('test').dialog({
'title':'Test',
'buttons': {
'Close' : function() { $(this).dialog('close'); }
}
});
return false;
});
});
</script>
</body>
</html>
答案 0 :(得分:1)
试试这个:
HTML
<a class="tttest" href="javascript:void(0)" title="Must Have Title">Test Link</a>
请注意,您必须拥有标题
JS
$(document).ready(function () {
$(".tttest").tooltip({content:'Test Tooltip'});
$('.tttest').on('click', function () {
$('<div></div>').text('test').dialog({ // use .text rather than .html
'title': 'Test',
buttons: [{
text: "Close",
click: function () {
$(this).dialog("close");
$(".tttest").blur(); //remove focus from .tttest to close tooltip
}
}]
});
});
});