1

呼び出しページで、次のように href を使用して fancyBox をバインドします。

<a id="myId" href="myContent.cfm">Click me</a>
<script>
    $(document).ready(function(){
        $('a#myId').fancybox({
            // my initialization params 
        });
    });
</script>

myContent.cfm では、追加ボタンと削除ボタンを備えたデフォルトの「フィルター」が作成されます。このようなもの：

<div id="fd_0" class="eachFilter blank">
    <select name="filterBy" class="fl filterBy">
        <option selected="selected">-- Add a Filter --</option>
        <!--- add more options --->
    </select>
    <button type="button" class="addFilter default" title="Add a filter to the current filter set.">+</button>
    <button type="button" class="deleteThisFilter default" title="Delete this filter from the current filter set.">-</button>
</div>

addFilter ボタンをクリックすると、連続した ID を使用して、クリックされたフィルターの後に新しい「デフォルト」フィルターが dom に追加されます。逆に、deleteFilter ボタンをクリックすると、そのフィルターが削除され、残りのすべてのフィルターの ID が再番号付けされます。ただし、フィルターが 1 つ残っている必要があります。私の元のコードでは、次のように、.live() を使用して、新しく作成された要素にイベント ハンドラーをアタッチしました。

$('.addFilter).live('click', function(){        
    // get number of existing filters
    // create new blank filter
    // add to the dom after the filter whose button was just clicked
});
$('.deleteThisFilter).live('click', function(){     
    // if there is more than one existing filter, use .remove() to remove the parent .eachFilter div
    // renumber the existing filter ids consecutively
});

ユーザーは、必要なすべての「フィルター」を作成した後、それらを「適用」してファンシーボックスを閉じ、フィルター処理された新しいパラメーターでグリッドをリロードするか、単純にキャンセルしてファンシーボックスを閉じます。

これは最初はすべて正常に機能し、fancybox を再度開くと、最初の空白フィルターの追加ボタンが期待どおりに機能します。ただし、2 番目のフィルターを追加した後、dom に追加されたフィルターには、addFilter ボタンと deleteFilter ボタンに複数のイベント ハンドラーが追加されます。最初に 1 つのフィルタを追加し、2 回目にファンシーボックスに戻り、デフォルト フィルタの追加ボタンをクリックしてフィルタを追加し、次に新しく作成したフィルタの追加ボタンをクリックすると、さらに 2 つのフィルタが追加されます。ファンシーボックスを閉じてもう一度開き、フィルターを追加して、そのフィルター追加ボタンをクリックすると、さらに 3 つのフィルターが追加されます。

だからここに私がこれまでに試したことがある：

1) .live( ) 呼び出しを変更する

$(document).on('click', 'addFilter', function(){ // add my filter code});

2)フィルターを作成するコードを関数に入れます。最後に.bind()を使用して、新しく作成されたフィルターにイベント ハンドラーを追加します。続いて使用

$('.addFilter').unbind('click', fnCreateMyFilter())

ファンシーボックスを閉じるとき。

3)新しく作成されたフィルター要素でのみ.live( )を使用し、デフォルト要素で通常のクリック ハンドラーを使用する

4) jQuery を現在のバージョンから 1.8.3 にアップグレードする

5) fancybox .onClosed関数内のすべての要素に対して.remove()を呼び出します (ただし、fancybox を閉じると、実際には dom から要素が削除されるという印象を受けました)。

何かご意見は？

4

2 に答える 2

1

いつものように、それはすぐに明らかにならない最も明白なことです。.js コードをポップアップから独自のファイルに移動すると、問題が修正されました。これは、すべてのコードを機能させた後に行うつもりだったものです。

于 2013-02-13T17:44:51.660 に答える
0

Fancybox2 http://fancyapps.com/fancybox/と Noty ポップアップhttp://needim.github.com/noty/を組み合わせて使用​​していて、同様の問題がありました。

リンクを使用class='fancybox.ajax'して、ajax経由で製品編集フォームをファンシーボックスにロードしました。href

ファンシーボックスに別の（または同じ）製品をリロードするまで、保存ボタンをクリックするとすべてが正常に保存されました。

このコードを使用して、保存ボタンをトリガーしていました。

$(document).on("click",".save_product_button",function(){
  ... post to ajax file to save info
});

それを使用すると、複数の noty ポップアップと保存がトリガーされました (リフレッシュしてから fancybox をロードするたびに 1 回)。これは、保存ボタンがドキュメント モデルに既に何度も読み込まれているためです。（私は推測する？？）

しかしon()、保存ボタンの直接の親に変更すると、すべての問題が解消されました。

$("#productBox").on("click",".save_product_button",function(){
  ... post to ajax file to save info
});

それ以来、すべてが一度保存されました。

さらに、これによりコードが少し速くなるはずです。

これが、私のように半日を無駄にしない人に役立つことを願っています.

于 2013-03-15T21:27:58.650 に答える