jQuery Tooltip保持打開，如果它在iframe中的鏈接（在FF＆IE中）

Question

我用一個幫助圖標替換標準的「重置密碼」文本鏈接，但我發現當jQuery Tooltip打開時一個iframe中的鏈接，一旦鏈接被點擊直到父頁面被刷新，它將保持打開狀態。

我使用的是內嵌框架，但當鏈接到另一個頁面時，我也遇到了同樣的問題。我嘗試在<span>標記內移動標題，並關閉iframe並使用下面的函數打開一個新的標題，但工具提示僅在頁面上保持打開狀態。

UPDATE - 我創建了一個小提琴說明問題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

Answer 1

可能是fancybox和jQueryUI工具提示之間的不兼容或錯誤。

本質上，fancybox顯示第二種形式，但瀏覽器沒有看到mouseout事件。您可以通過在jQueryUI工具提示的.close()事件中添加回調函數來檢查此問題。

$('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') 
}) 

有一個小問題，其中工具提示的創建方法，這意味着只上述單擊處理它將與

Uncaught Error: cannot call methods on tooltip prior to initialization; attempted to call method '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(){ ... })部分:-)