事前に配線されたイベントで動的にハイパーリンクをDOMに追加しますか？

Question

私は1つの列にハイパーリンクが含まれているテーブルを持っています。ページのロードで、すでに人口行の数があります、と私はアレイの上に列挙し、各ハイパーリンクのクリックイベントをフックアップしています：

$$("a[id^=remove]").each(function (item) { 
    item.observe("click", removeDevice); 
}); 

この部分の作品。ハイパーリンクをクリックすると、removeDeviceメソッドが実行されます。このメソッドには、ハイパーリンクがナビゲートされないようにするためのEvent.stop呼び出しが含まれています。

後でこのテーブルに新しい行を追加し、同じテーブルで動作する新しいハイパーリンクを作成する必要があります。私はこのように、これらの動的に使用してプロトタイプを作成しています：

var remove = new Element("a", { id: "remove-{SerialNumber}".interpolate(device), href: "/Home/Javascript" }) 
    .update("Remove") 
    .observe("click", removeDevice); 

しかし、私は今、私のテーブルに、この要素を取得する方法にこだわって、まだイベントがアップ有線持っています。

newRow.insert({ bottom: new Element("td").update(remove.outerHTML) }); 

ハイパーリンクを取得することはできますが、ここでイベントは機能しなくなる可能性があります。要素を直接追加する方法はありますか？私は配線したイベントを保持していますか？

Answer 1

私は過去にこれと同じ事をし、すべての要素（動的またはそれ以外）はあなたの例を使用して、私のハンドラ

を誘発するよう親にイベントを観察するイベント伝播を使用する方法を理解しなければなりませんでしたデータ

<table id="clickablerows"> 
    <tr><td><a href="javascript:void(0);" class="clickme">Click Me</a></td></tr> 
    <tr><td><a href="javascript:void(0);" class="clickme">Click Me</a></td></tr> 
    <tr><td><a href="javascript:void(0);">Don't Click Me</a></td></tr> 
</table> 

の行のあなたは、テーブル要素を観察することができますが、それは、このWAを有線でリンク

$('clickablerows').on('click','.clickme',function(e,target){ 
    // e is the Event object 
    // `this` is the <table> element 
    // target is the element that matches the CSS selector (2nd parameter) 

}); 

からバブルアップイベントを監視しますあなたは1人のオブザーバーと多くのオブザーバーが対等に対処しているだけです.の要素がテーブルに追加されても、CSSセレクターと一致する場合はハンドラーを起動します。時々私は怠惰に、ルートドキュメントオブジェクトでクリックの

警告を監視document.on('click','.clickme',function(e,target){})行います：イベントあなたは最高意志バブルを使用したい場合は、焦点やぼかしなどのないバブル、MDNにチェックしますか、いくつかのイベントが参照するには親要素。