0

問題のフィドル:

クリックして表示(試行 #1、委任イベントを使用)

クリックして表示(試行 #2、以下のブルート フォース アプローチ)

クリックして表示(試行 #3、リファクタリング、解決しようとしている問題があります)

私が取り組んでいるプロジェクトでは、かなりダイナミックなフォームを探っています。一部の静的要素に加えて、非表示の「テンプレート」マークアップ セットからクローンを作成し、ビジネス プロセスのさまざまな時点で追加できる、さまざまな対話型要素があります。

動的な性質のため、jQuery 要素キャッシュとイベント ハンドラーをオンロードでセットアップし、ユーザーに何でも実行させるという私の実証済みの方法は、この動的な性質のためにうまくいきません。動的に追加された要素にクリック イベントがないことがわかりました。

この問題を解決するために、問題のスクリプト要素ごとに手動で rebind メソッドを設定しました。再バインド プロセスには、A) 特定の記述セレクターの要素セットを再取得する、B) そのキャッシュにある既存のイベントを削除する (これらのイベントは不完全な要素セットに適用されるため)、C) bind メソッドを呼び出して新しい要素セットを適用する、が含まれます。セット全体へのイベント。

私が手に入れた力ずくの作業方法では、これが起こっていました:

var $elementCache = $('.some-class');

function rebindSomeLink() {
    // Re-acquire the element cache...
    $elementCache = $('.some-class');

    // Drop all existing events on the cache...
    $elementCache.unbind();

    // Call a bind function to establish new events.
    bindSomeLink();
}

function bindSomeLink() {
    $elementCache.click(function (e) {
        // ...Behavior...
    });
}

// There are four other links with a similar rebind/bind function relationship set up.

当然のことながら、ほぼまったく同じコードでリバインドが頻繁に繰り返されることに気付きました。リファクタリングの機は熟しています。関数を追加した共通のライブラリ名前空間がありrebindEventsます...

var MyCommon = function () {
    var pub = {};

    pub.rebindEvents = function($elementCache, selector, bindFunction) {
        $elementCache = $(selector);
        $elementCache.unbind();
        bindFunction();
    };

    return pub;
}();

それを呼び出してサイトを実行しようとすると、すぐにつま先をUncaughtTypeError: method click cannot be called on object undefined.

結局のところ、次のように呼び出すと次のようになります。

MyCommon.rebindEvents($elementCache, '.some-class', bindSomeLink);

がメソッド$elementCacheに渡されていません。rebindEventsデバッガーでステップすると、 is 内の $elementCacherebindEventsundefined.

いくつかの便利なStackOverflow調査により、少なくとも私が慣れ親しんでいる C/C++/C# の意味では、JavaScript には参照渡しがないことが明らかになりました。

A) ある種のキャッシュ参照パスを使用して、この再バインド機能をリファクタリングすることは可能ですか?

B) リバインド関数を共通の名前空間にリファクタリングできる場合、どうすればよいですか?

4

1 に答える 1