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 - 结果为空。

如果container包含菜单栏列表，那么它也将被替换（可能是您重新创建点击处理程序的原因）。考虑使用Event.on一次，以便新插入的元素行为正确。

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

还要考虑如果你正在做的只是操作类名，你可以在使用AJAX时在服务器上执行此操作，这样可以避免竞争问题。

Answer 2

在单击第一个项目之前它不起作用的原因是因为oncom函数包含li元素的observe，并且在单击一个之前您没有运行该代码。如果可能的话，你需要摆脱html中的onClick东西。只需在页面加载时运行此代码，它就会立即观察到li：

$$('#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));

原型hasclassname问题

2 个答案: