4

Joomla! のモジュールを作成しています。Ajax を使用してさまざまなクエリをデータベースにレンダリングするクライアントのページ。これらのクエリの結果、さまざまな DIV の HTML コード全体が再生成されます。私のjQueryオブジェクト内にはcache()、さまざまなイベントをアタッチするために必要なすべてのオブジェクトを格納するasという名前の関数があります。私の問題は、これらの div のいずれかから HTML コードを再生成するたびに、すべてのオブジェクトを再構築する必要があることです。そのため、recache()この作業をより簡単にする新しい関数を作成しました。

これは最善の手順ではないと思います。cache()この関数を毎回呼び出さずにこれらのハンドラーを維持する方法はありますか、またはこのオブジェクトを動的に再バインドする方法はありますか?

ありがとうございました！

ここに私のコード：

    var Object = {
        init: function() {
            this.cache();
            this.bindEvents();
            return this;
        },

        cache: function() {
                   OBJECTS....
                       this.nameObject = $('#anchor');
                       etc..
        },

        recache: function() {
            Objects to be recached as needed.
        },

        bindEvents: function() {
            EVENTS attached to the objects. 
                        this.nameObject.on( 'click', 'context', this.nameFunction );

        },

                    nameFunction: function() {
                        #CODE....
                    }

                }; //END Playlist (Object)

window.Object = Object.init();

私は通常、 、またはon()の代わりに function を使用しますが、これがまさに私の問題かどうかはわかりません。delegate()live()bind()

前もって感謝します！

4

2 に答える 2

11

あなたは正しい計画をほのめかしました: use .on(). ただし、リスナーを委譲するときは、破棄されないリスナーに委譲する必要があることに注意してください。

または言い換えれば：

// will not do anything useful for this scenario:
$('.something').on('click', function() { /* ... */ });

とは異なります

// use the document as a listener: will work but not efficient
$(document).on('click', '.something', function() { /* ... */ });

とは異なります

// use a closer ancestor that is NOT destroyed. Best option if you can
$('#someAncestor').on('click', '.something', function() { /* ... */ });
于 2012-03-30T14:05:25.193 に答える
4

イベント ハンドラーを親要素にバインドし、イベント委任を使用してイベントを処理します。親要素にイベント ハンドラーをバインドすることで、すべての子要素にバインドする必要がなくなります。

/ HTML /

<div id="container">
    <button id="button1" class="click">button with click</button>
    <button id="button2" class="click">button with click</button>
</div>

/ Javascript /

// use this
$("#container").on("click", ".click", function(){
    alert(this.id + ": I've been clicked.");
});

// don't use this
$(".click").on("click", function(){
    alert(this.id + ": I've been clicked.");
});
于 2012-03-30T14:11:46.830 に答える