4

ajax経由でロードしている要素のリストがあります(jQueryの.load()を使用)。これらの各要素の横には (編集) リンクがあり、小さな編集フォームを (カラーボックスを使用して) ライトボックス化します。ライトボックスが閉じられたら、onClosed コールバックを使用して ajax リストをリロードし、編集中に加えられた変更を表示します。

カラーボックスの呼び出しは次のようになります。

$('.colorbox').colorbox({
  'iframe':true,
  'onClosed':function(){
    $("#featureList").load("/template/featureList","id="+$("#model_id").val());
  }
});

私のリストは次のようになります。

<div id="featureList">
  <ul id="features">
    <li id="item_000000000008+0">Element 1 (<a class="colorbox" href="/template/featureLightbox?template_id=000000000008&amp;delta=0">Edit</a>)</li>
    <li id="item_000000000008+1">Element 2 (<a class="colorbox" href="/template/featureLightbox?template_id=000000000008&amp;delta=1">Edit</a>)</li>
  </ul>
</div>

colorboxのソース コードを調べたところ、それがバインドに使用jquery live()されていることがわかりました。ここにあります：

$('.' + boxElement).live('click', function (e) {
  if ((e.button !== 0 && typeof e.button !== 'undefined') || e.ctrlKey || e.shiftKey || e.altKey) {
    return true;
  } else {
    launch(this);   
    return false;
  }
});

上記のように、カラーボックスが機能する方法は、「c​​boxElement」という名前で作成されるクラスである「boxElement」にバインドすることです。live() バインド カラーボックスの前に、セレクター (私の例では .colorbox) に一致するすべての要素にこのクラス (cboxElement) を追加してから、この新しいクラスにバインドします。

したがって、カラーボックス バインドを ajax されたコンテンツの外側に配置すると、#featureList div を ajax に置き換えた後にリンクにバインドされると考えました。しかし、.colorbox ではなく .cboxElement にバインドしているため、そうではありません。そのため、ajax がカラーボックスをリロードしても、.cboxElement クラスが要素に再追加されません。

ajax コンテンツで $.fn.colorbox.init() を呼び出して、カラーボックスを取得して .cboxElement クラスを要素に再追加しようとしましたが、これは効果がありませんでした。（シャドウボックスを扱うときはこのようなことをしますが、カラーボックスでは同じようには機能しないようです。）

そこで、すべてのカラーボックス コードを ajax コンテンツ内に配置しようとしました。これを行うと、カラーボックスのバインドがスタック/チェーンになります。したがって、2回目に呼び出すと、2つのカラーボックスが表示されます（メイン画面に戻るには、「閉じる」ボタンを2回押す必要があります）。3回目で3つ取れました。これは、colorbox を再度呼び出すと、.cboxElement クラスが追加され、古い live() バインドが再びアクティブになり、別の live() バインドも追加されるためです。最初に .die() を呼び出して .live() バインドをクリアしようとしましたが、何らかの理由で機能しませんでした。

関連する投稿をいくつか見つけましたが、カラーボックスは既に live() を使用しているため、この問題を解決したものはありません:
Problem with jQuery Colorbox
jQuery AJAX table to a page but now the colorbox overlays not work

そこに他のアイデアはありますか？私は本当に困惑しています。別のライトボックスに切り替える必要があるように感じますが、一般的にはカラーボックスが好きで、この ajax の問題が発生するまで、サイトの他の場所でうまく機能していました。

ありがとう！！！

編集：

したがって、この場合、私の問題は、フレームワーク ( Yiicolorbox ) が各 AJAX 呼び出しに重複したスクリプトを含めていたため、問題が発生していたことでした。だから気をつけて！

重複スクリプトの問題に直面していない問題を抱えているすべての人のために、@Relic は以下を指摘しています。カラーボックスのデフォルトバインディングに依存live()する。私の場合、次のように微調整します。

$(document).delegate("#features a", "click", function (event) { // $.colorbox() call  }
4

3 に答える 3

4

まず第一に、.live()非推奨なので使用しないでください。代わりに使い方を学んで.delegate()ください。これははるかに強力なリスナーであり、問​​題の解決に役立つことがわかります。

ページの読み込み時に最初に DOM の準備が整い、カラーボックスがセレクター用に初期化されますjavascriptで読み取られました。

body #main次のことを試してください-すべて、既存および新規を監視するためa[rel='lightbox']：

$("body #main").delegate("a[rel='lightbox']", "click", function (event) {
                    event.preventDefault();
                    $.colorbox({href: $(this).attr("href"),
                            transition: "fade",
                            innerHeight: '515px',
                            innerWidth: '579px',
                            overlayClose: true,
                            iframe: true,
                            opacity: 0.3});});

「.on()」の編集

$("body #main").on("click", "a[rel='lightbox']", function (event) {
                        event.preventDefault();
                        $.colorbox({href: $(this).attr("href"),
                                transition: "fade",
                                innerHeight: '515px',
                                innerWidth: '579px',
                                overlayClose: true,
                                iframe: true,
                                opacity: 0.3
                         });
});

はい、大きな変更、私は知っていますが、ポイントは 'on' メソッドが 'bind' としても使用できるということです。

于 2012-01-24T17:50:24.987 に答える
1

私はこれをかなり簡単な方法で解決しました。

ajax 応答 (通常は JavaScript 応答) を送り返す場合は、その応答に通常のカラーボックス バインディング コードを (どこでも行うように) 添付します。

$('.colorbox').colorbox({
  'iframe':true,
  'onClosed':function(){
    $("#featureList").load("/template/featureList","id="+$("#model_id").val());
  }
});

これをサーバーからの js 応答に添付します。これは私のために働いた。

于 2010-08-24T11:03:17.103 に答える
0

この問題は、最初は気付かなかったため、質問に記載しなかったことに関連しているようです。この新しい情報を反映するように質問を編集しました。

私の問題は、AJAX 応答が複数バインディングであり、カラーボックス スクリプトを複数回含むことでした。スクリプトを含めるために使用していた Yii Framework ヘルパー ウィジェットには、毎回の応答に jQuery と Colorbox も含まれています。Yii には、必要なスクリプト (jQuery など) がすでにメイン ページに含まれているかどうかを判断する方法がないため (典型的なステートレス HTTP の問題)、毎回 AJAX 部分レンダリングに含まれます。

renderPartial各 Ajax 呼び出しのビューで Colorbox バインディングを行うために Yii ウィジェットを使用しないことで、この問題を解決しました。親ページにカラーボックス バインディングを含めるだけなので、Ajax コンテンツには JS が含まれていません。

于 2010-08-26T17:11:19.790 に答える