jQuery Tooltip остается открытым, если он находится в ссылке в iframe (в FF и IE)

Question

Я заменяю стандартную текстовую ссылку «Сбросить пароль» с помощью значка «Справка», но я обнаружил, что когда всплывающая подсказка jQuery включена ссылку внутри iframe, она остается открытой после щелчка ссылки до тех пор, пока не будет обновлена ​​родительская страница.

Я использую встроенные фреймы, но у меня также возникла такая же проблема при обращении к другой странице. Я попытался переместить заголовок внутри тега <span>, а также закрыть iframe и открыть новый с функциями ниже, но всплывающая подсказка остается открытой на странице.

UPDATE - Я создал скрипку, чтобы продемонстрировать проблему http://jsfiddle.net/chayacooper/7k77j/2/(Нажмите 'Reset Link'). Я испытываю проблему как в 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-щ-1.9.1 и fancyapps2

Answer 1

Может быть несовместимость или ошибка между fancybox и подсказкой jQueryUI.

По существу, fancybox показывает вторую форму, но браузер не видит событие mouseout. Вы можете проверить это, добавив функцию обратного вызова в событие .close() всплывающей подсказки jQueryUI.

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

Вы должны быть в состоянии видеть closing в консоли в IE, Firefox и Chrome, когда мышь перемещается из «Reset Link» якорь. Однако при нажатии «Сбросить ссылку» в Chrome вы снова видите строку журнала closing, но в IE9 она больше не появляется. Таким образом, браузеру не хватает события.

Мы можем обойти это вручную вызова .tooltip('close'), когда «Reset Link» щелкают, как это:

$('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(), который использует делегирование событий для всех элементов с title. Это самый простой способ создания всплывающих подсказок для всех элементов, поэтому я понимаю, почему это используется, но он может добавлять ненужные события и обработку на всю страницу, а не настраивать таргетинг на определенные элементы. Поэтому, глядя на ошибку, мы говорим, что нам нужно явно создать всплывающую подсказку для элемента, который мы хотим назвать '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(){ ... }) часть :-)