我有一个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));
}
但是它没有使当前链接影响该类,但是当我点击下一个链接时它会生效。怎么解决这个问题?
答案 0 :(得分:0)
您传递给更新程序的选项是{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时在服务器上执行此操作,这样可以避免竞争问题。
答案 1 :(得分:0)
在单击第一个项目之前它不起作用的原因是因为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));