JavaScriptアクションをオブジェクトにバイパスする

Question

JavaScriptアクションをオブジェクトにバイパスする

私はHTMLコード内のいくつかのオブジェクトにアクションを付けるスクリプトを持っています。たとえば、入力された文字数を更新する with-counter のクラスを持つテキストエリアを言います。 mouseover が発生したときにリッスンするリスト。 ajaxifiedされているリンク。等々。

例えば。：

$("textarea.with-counter").keydown(function(){
   var text_len = $(this).val().length;
   //manipulate the span/etc that has the counter
});
$("a.ajax_link").click(function(){
   var loc = $(this).attr("href");
   //load the value of href via $.ajax to some div
   //yadda yadda
});

最初のシナリオは次のとおりです。比較的少量のHTMLがデータベースからロードされ、アクションがアタッチされています（上記のコードスニペットを実装しています）。さて、私は同じ形式のHTMLの別のチャンクを読み込むこのスクリプトを持っています。新しく読み込まれたHTMLは、同じアクションを受け取る必要があります。

問題の根底には次のようなものがあります。これらのアクションを、以前にこれらのアクションをアタッチしたオブジェクト/要素にアタッチする必要はありません。新しいHTMLのチャンクがロードされるにつれて、このアクションの追加が遅くなります。アクションは、以前にロードされたHTMLにアタッチされています（これらのアクションがあることを覚えておいてください）。アクションは、新しくロードされたHTMLチャンクにのみ接続する必要があります。 FFがフリーズし、スクリプト処理を続行するかどうか尋ねることがあります。

Ergo、質問：前にアクションを付けた要素にアクションの添付をバイパスする方法がありますか？

*百万の皆さん、ありがとうございます。

1

追加された 27 10月 2011 〜で 01:35 著者 threepoint1416

ビュー: 48

源

2 答え

Simply use live events, e.g. $(...).live('eventname', function() { ... })

要素自体には添付されていませんが、ドキュメントではイベントバブリングのおかげで、 .live（）呼び出し時に存在しなかったものを含め、すべての一致するイベントに対して機能します。

0

追加された 27 10月 2011 〜で 01:37 著者 ThiefMaster

源

パフォーマンスは上手くいくはずです。とにかくイベントの上部にバブルが入るので、唯一の違いは、イベントがすでにバブリングされているので（ preventDefault（）または stopPropagation（））ドキュメントのルート要素に到達したとき）。ライブイベントの代わりに delegate（）を使用することもできます。この場合、使用するルート要素を指定します。

追加された 27 10月 2011 〜で 02:50, 著者 ThiefMaster, 源

私は、ライブイベントのパフォーマンスが、私が言及したコンテキストアプローチを使用することに対して、特に大きなページではどうなるかを考えています。 jsperf.com テストを行うとよいでしょう。 :-)

追加された 27 10月 2011 〜で 01:46, 著者 GregL, 源

メソッド名に基づいて、これはタブが開いている間、アクションを要素に継続的にアタッチしますか？ありがとう。

追加された 27 10月 2011 〜で 01:56, 著者 threepoint1416, 源

とにかく、私は実際に私が構築しているものにこのメソッドを実装しました。しかし、必要が生じた場合、私はあなたの答え@ GregLへの経路を決めます。どうもありがとう

追加された 27 10月 2011 〜で 02:27, 著者 threepoint1416, 源

著者 GregL · Answer 1 · 2011-10-27T01:44Z

はい、コンテキストを取り込む関数、つまり検索するセレクタや要素に、アクションバインディングコードをリファクタリングします。次に、セレクタをすべて変更して、jQuery $関数の2番目のパラメータとしてコンテキストに渡します。

次に、指定された新しいコンテナ要素に対してこの関数を呼び出すことができます。

例えば。

function bindActions(context) {
    context = context || $('body');//use whole page if no context specified
$("textarea.with-counter", context).keydown(function(){
   var text_len = $(this).val().length;
   //manipulate the span/etc that has the counter
});
$("a.ajax_link", context).click(function(){
   var loc = $(this).attr("href");
   //load the value of href via $.ajax to some div
   //yadda yadda
});
}

// add new content to a div with id of "new3", for example, then:
bindActions('#new3');