2009-08-25 7 views
1

イムの取り付けと再取り付け:は、このようなページの特定の要素にlisternersを添付するフレームワーク(具体的にはプロトタイプ)からイベントハンドラを使用してイベントハンドラ

//html 
<a href="?default=1" class="default">Set Default</a> 
//js 
document.observe('dom:loaded', function(){ 
     //get all elements with d 'default' classname 
     for(i = 0;i < document.getElementsByClassName('default').length;i++) 
     { 
       s = document.getElementsByClassName('default')[i]; 
       //attach an onclick event 
       s.observe('click', function(e){ 
         //prevent the default action (i.e loading the page) 
         e.preventDefault(); 
         //read d link attribute 
         ref = this.readAttribute('href'); 
         //and now, do it the ajax way 
         new Ajax.Request('js/ajax/handler.php'+ref, { 
           method:'get', 
           onSuccess:function(transport){} 
         }); 
       }); 
     } 
}); 

それはうまく動作します。本当によく。しかし、挑戦があります。ほとんどの場合、そのようなアクションはDOMを操作し、「デフォルト」クラス要素(つまり、別のSet Defaultをどこかに追加)の1つ以上を追加することがあります。それは実際に意図的です。しかし、新しく追加された 'default'クラス要素にはclickイベントが添付されません。現時点では、すべての「デフォルト」クラスを再びループして、イベントを再接続することをお勧めします。他のアイデア?

答えて

2

これを解決する通常の方法は、イベントの委任によるものです。あなたはこれらの.default項目のすべてを保持するコンテナにclickイベントをフックする場合は、その1つのハンドラに応答することができます:

document.observe('click', function(event) { 
    var elm; 

    elm = event.findElement('.default'); 
    if (elm) { 
     // do your nifty stuff with the element 
    } 
}); 

それは、彼らはいくつかの高いアップコンテナを共有する場合documentである必要はありません。 Event#findElementのドキュメントはhereです。

ところで、あなたのforループには大きなパフォーマンス上の問題があります。すべての繰り返しでdocument.getElementsByClassNameに電話しています!あなたがイベントの委任を使用する場合は、そのループはとにかく離れて行くが、それは何らかの理由で動作しない場合は、結果をループその後、たら、それを呼び出すと:

var defaults = document.getElementsByClassName('default'); 
for (i = 0; i < defaults.length; i++) 
+0

これは岩です。本当にありがとう! – kehers

1

あなたは上のすべてのクリックイベントに耳を傾けることができページを開き、event's targetを使用して、ユーザーがclassNameが "default"の要素をクリックしたかどうかを判断します。

+0

返事をありがとう。多くの助けを借りて – kehers

関連する問題