2009-07-16 15 views
1

ロード時に、ページ上のすべてのテキストエリアに目的の動作を追加します。DOM内の動的に挿入されたオブジェクトのイベントを観察する

Event.observe(window, 'load', function() { 
    $$('textarea').each(function(x) { 
    x.observe('keydown', dosomethinghere) 
    }); 
}); 

テキストエリアがDOMに既にあるが、どのように私は動的にページが読み込ま後に追加されているテキストエリア扱う必要がありますので、これは動作します(例:私は「もっと追加」というボタンがある場合)を。これらの新しく作成されたテキストエリアに同じ動作をさせていただきたいと思います。ありがとう。

答えて

0

jQuery Liveを使用することを検討してください。

0

まあ、答えは少しトリッキーです。これを行う唯一の方法は、テキストエリアのイベントリスナーのキャッシュを維持することです。ページに新しいテキストエリアを追加するときは、キャッシュされたすべてのイベントでEvent.stopObservingを呼び出す必要があります。 $$( 'textarea')。each(...)コードをもう一度呼び出すと、すべての要素にバインドされます。

ありがたい、誰かがlowproと呼ばれる非常に便利な軽量なプロトタイプの拡張で、すでにあなたのためにこれを行っている:http://www.danwebb.net/2006/9/3/low-pro-unobtrusive-scripting-for-prototype

をあなたは単にとして望むものを行うことができます。そして、

Event.addBehavior({ 
    'textarea:keydown': function(e) { 
    dosomethinghere(); // e.g. this.hide(); 
    } 
}); 

たび新しいテキストエリアを動的に追加するには、単にEvent.addBehavior.reload()を呼び出します。

"e"はEventオブジェクトであり、 "this"は関数(e){}定義のコンテキスト内の要素です。

1

私はそれを行う方法は、次のように、私はそれを追加するときにちょうど新しいテキストエリアを観察することである:

function doSomethingWithTextAreas(){ 
    //do something. 
} 

document.observe("dom:loaded", function() { 
    $$('textarea').each(function(s){ 
    s.observe('keydown', doSomethingWithTextareas); 
    }); 

$('add_more').observe('click', function(){ 
    textarea = new Element('textarea'); 
    textarea.observe('keydown', doSomethingWithTextareas); //Observes the new textarea. 
    Element.insert($('textarea_container'), {bottom:textarea}); 
}); 

}); 
0

これを行うための良い方法は、テキスト領域が火災追加javascriptの機能を持つことです他の機能が観察して行動することができるイベント。だから、: - オブザーバーを添付し、新しいテキストエリアと1を加え1 - 疎結合とお互いについて何も知らないことが

function add_textarea() { 
    // Code creates a new <textarea> and adds it to the page 
    var textarea = new Element("textarea"); 
    $("some-form").insert(textarea); 
    textarea.fire("textarea:add") 
} 

document.observe("textarea:add", function(event) { 
    event.target.observe('keydown', dosomethinghere); 
}); 

これはあなたの2つの機能ができます。誰かが観察できるカスタムイベントを起動するだけです。

関連する問題