Jquery ui 如果jQuery工具提示为'；在iframe（FF&IE）中的链接上的s

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

我使用的是内联框架，但我在链接到另一个页面时也遇到了同样的问题。我尝试将标题移动到

标记中，并使用下面的功能关闭iframe并打开一个新的iframe，但工具提示在页面上保持打开状态

更新-我创建了一个小提琴来演示问题（单击“重置链接”）。我在Firefox和IE中都遇到过这个问题（在Chrome和Safari中也可以）

HTML

---

我使用的jquery-1.8.2、jquery-ui-1.9.1和fancyapps2可能是fancybox和jQueryUI工具提示之间的不兼容或错误

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

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

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

当鼠标移出“重置链接”锚时，您应该能够在IE、Firefox和Chrome的控制台中看到

关闭。但是，当在Chrome中单击“重置链接”时，您会再次看到
关闭
日志行，但在IE9中它不会再次出现。因此浏览器缺少该事件

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

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

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

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

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

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

这里是完整的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包装函数--
$（函数（）{…}）
部分：-）
可能是fancybox和jQueryUI工具提示之间的不兼容或错误

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

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

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

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

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

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

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

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

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

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

这里是完整的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包装函数--
$（函数（）{…}）
部分：-）
您可以添加此问题的演示，或者在问题中添加更多HTML和jQuery吗？没有它很难生成测试用例：-）@andyb-我接受了你的建议，创建了一个小提琴来演示这个问题单击“重置链接”工具提示在这里会很好地消失。铬25；你用的是什么浏览器？@Mooseman-你完全正确：-）我发现大多数东西都可以在Firefox中使用，所以这通常是我的出发点。我刚刚测试了它，在Chrome和Safari中还可以，但我在Firefox和IE中遇到了问题。我现在将更新问题以包含这些信息：-）您可以在上添加此问题的演示，或者在问题中添加更多HTML和jQuery吗？没有它很难生成测试用例：-）@andyb-我接受了你的建议，创建了一个小提琴来演示这个问题单击“重置链接”工具提示在这里会很好地消失。铬25；你用的是什么浏览器？@Mooseman-你完全正确：-）我发现大多数东西都可以在Firefox中使用，所以这通常是我的出发点。我刚刚测试过，在Chrome和Safari中没有问题，但我在Firefox和IE中遇到了问题。我现在将更新该问题以包含这些信息：-）这非常有效，这是一个更完美的答案：-D出于好奇，我可以使用一个jQuery document.ready包装函数来完成我的所有功能吗，或者我最好将相关函数分组在一起？您可以有一个或多个函数，这对jQuery没有影响。但是它确实如此，所以如果可能的话，最好使用一个。每个项目都不同，但对于大型项目，通常采用的方法是将JS、CSS、HTML保存在模块中，并使用预处理器将CSS连接到单个文件中-请参阅Chrome DevTools网络选项卡了解stackoverflow