問題のフィドル:
クリックして表示(試行 #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 内の $elementCacherebindEvents
がundefined
.
いくつかの便利なStackOverflow調査により、少なくとも私が慣れ親しんでいる C/C++/C# の意味では、JavaScript には参照渡しがないことが明らかになりました。
A) ある種のキャッシュ参照パスを使用して、この再バインド機能をリファクタリングすることは可能ですか?
B) リバインド関数を共通の名前空間にリファクタリングできる場合、どうすればよいですか?