1

我正在用帮助图标替换标准的“重置密码”文本链接，但我发现当 jQuery 工具提示位于 iframe 内的链接上时，一旦单击链接，它就会保持打开状态，直到刷新父页面。

我正在使用内联框架，但在链接到另一个页面时我也遇到了同样的问题。我尝试在标签内移动标题<span>，以及关闭 iframe 并使用以下功能打开一个新的，但工具提示只是在页面上保持打开状态。

更新- 我创建了一个小提琴来演示问题http://jsfiddle.net/chayacooper/7k77j/2/ （单击“重置链接”）。我在 Firefox 和 IE 中都遇到了这个问题（在 Chrome 和 Safari 中很好）。

HTML

<a href="#inline_form" class="fancybox_inline" title="Forgot Your Password?"><img src="help.jpg"></a>

关闭 iframe 和打开新 iframe 的函数 

function close_iframe() {
    parent.jQuery.fancybox.close();
     }

function open_iframe() {
    $.fancybox.open([{href:'reset_password.html'}], { type:'iframe'           
         });
     }

我正在使用 jquery-1.8.2、jquery-ui-1.9.1 和 fancyapps2

4

1 回答 1

1

可能是 fancybox 和 jQueryUI 工具提示之间的不兼容或错误。

本质上，fancybox 显示的是第二种形式，但浏览器没有看到该mouseout事件。.close()您可以通过向jQueryUI 工具提示的事件添加回调函数来检查这一点。

$('a[href="#inline_form1"]').tooltip({
    close: function( event, ui ) {
      console.log('closing')
    }
})

closing当鼠标移出“重置链接”锚点时，您应该能够在 IE、Firefox 和 Chrome 的控制台中看到。但是，在 Chrome 中单击“重置链接”时，您closing会再次看到日志行，但在 IE9 中它不会再次出现。因此浏览器缺少该事件。

.tooltip('close')我们可以通过在单击“重置链接”时手动调用来解决此问题，如下所示：

$('a[href="#inline_form1"]').on('click', function() {
  $(this).tooltip('close')
})

创建工具提示的方式存在一个小问题，这意味着仅使用上面的单击处理程序就会出错

未捕获的错误：无法在初始化之前调用工具提示上的方法；试图调用方法“关闭”

这似乎是由于使用对$(document).tooltip()具有标题属性的所有元素使用事件委托的方法引起的。这是为所有元素创建工具提示的最简单方法，因此我理解为什么使用它，但它可以向整个页面添加不必要的事件和处理，而不是针对特定元素。因此，查看错误告诉我们需要在要调用的元素上显式创建工具提示'close'。所以需要添加如下初始化

$('a[href="#inline_form1"]').tooltip();

sp 这里是完整的 JavaScript

$(function () {
    $(".fancybox").fancybox({
      title: ''
    })

    $(".fancybox").eq(0).trigger('click')

    $(document).tooltip();
    $('a[href="#inline_form1"]').tooltip()

     $('a[href="#inline_form1"]').on('click', function() {
       $(this).tooltip('close')
    })
})

注意：您只需要一个 jQuery document.ready包装函数 -$(function (){ ... })部分 :-)

于 2013-03-09T14:11:58.327 回答