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は2番目のフォームを表示していますが、ブラウザーは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')
})

ツールチップの作成方法に小さな問題があります。つまり、上記のクリックハンドラーだけでは、次のエラーが発生します。

キャッチされないエラー：初期化の前にツールチップでメソッドを呼び出すことはできません。メソッド'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')
    })
})

注：必要なjQuerydocument.readyラッピング関数は1つだけです-部分$(function (){ ... }):-)

于 2013-03-09T14:11:58.327 に答える