プロトタイプhasclassname問題

Question

私はULのリストを持っている：ここでは

<ul id="menubar"> 

<li onclick="ajx=new Ajax.Updater('container','schedule.php',{evalScripts:true,onComplete:oncom(this)})">one</li> 
<li onclick="ajx=new Ajax.Updater('container','schedule.php',{evalScripts:true,onComplete:oncom(this)})">two</li> 
</ul> 

は、関数コールバックです：

function oncom(element){ 
      //$(element).addClassName('current'); 
      $$('#menubar li').invoke('observe', 'click', (function(element) { 
    //removes classname from all the li elements 
    // 
    var list_item = Event.element(element); 



    //Gets the li you clicked on 


    //adds the classname 
    if(!(list_item.hasClassName('current'))){ 
    list_item.addClassName('current'); 
    }else{ 
    $$('#menubar li').invoke('removeClassName', 'current'); 
    } 

}).bindAsEventListener(this)); 
      } 

しかし、そのは、そのクラスの影響を持つ現在のリンクをしていないが、私は上のクリックしたとき次のリンクが有効になります。これを解決するには？

Answer 1

アップデーターに渡すオプションは{evalScripts:true,onComplete:oncom(this)}です。関数oncomをonCompleteに割り当てずに、oncom(this)を直ちに呼び出し、その結果をonCompleteに割り当てて、結果をnullにします。

containerにメニューバーのリストが含まれている場合は、それも置き換えられます（おそらくクリックハンドラを再作成する理由）。新しく挿入された要素が正しく動作するように、Event.onを1回使用することを検討してください。

Event.on('container', 'click', '#menubar li', function(event, element) { 
    // manipulate class names here 
}); 

はまた、あなたがやっているすべてのクラス名を操作している場合はAJAXを使用しているときに、サーバー上でそれを行うことができ、レースの問題を回避することを検討してください。

Answer 2

最初の項目をクリックするまで機能しないのは、oncom関数にli要素のobserveが含まれていて、クリックするまでそのコードを実行していないからです。可能であれば、htmlでonClickのものを取り除く必要があります。ページが読み込まれたときにこのコードを実行すると、すぐに李が観察されます：

$$('#menubar li').invoke('observe', 'click', (function(e) { 
    //Removes current class from all the li's 
    $$('#menubar li').invoke('removeClassName', 'current'); 
    //Add current class to the li clicked on 
    Event.element(e).addClassName('current'); 
    //Does whatever this does, without being in the onClick 
    new Ajax.Updater('container','schedule.php',{ 
     evalScripts:true 
    }); 
}).bindAsEventListener(this));