Mootools Events
在第一个click
上 。<
希望有人对此有疑问:http://jsfiddle.net/3j3Ws/
CSS
ul li,li.selected div{
width:22px;
height:22px;
display:block;
background:#000;
color:#fff;
text-align:center;
border-radius:3px;
}
ul#list{
display:none;
opacity:0;
float:left;
}
HTML
<ul id="option">
<li class="selected" id="a">a</li>
<ul id="list">
<li id="b">b</li>
<li id="c">c</li>
<li id="d">d</li>
</ul>
</ul>
Mootools JavaScript
window.addEvent('domready', function(){
var x = '<div>v</div>';
$$('ul#option li.selected').set('html',x);
var opt = $$('ul#option li.selected div');
var d = opt.getStyle('display');
var l = document.id('list');
var list = opt.set('morph').addEvents({
click:function(){
l.store('timerA',(function(){
l.morph({
'display':'block',
'opacity':1
});
$$('ul#option li.selected').setStyle('background-color','#fff');
$$('ul#option li.selected div').destroy();
}).delay(10,this));//$clear(this.retrieve('timerA'));
}
}
);
l.set('morph').addEvents({
mouseleave:function(el){
this.store('timerB',(function(){
this.morph({
'display':d,
'opacity':0
});
$$('ul#option li.selected').removeProperties('style');
$$('ul#option li.selected').set('html',x);
}).delay(500,this));//$clear(this.retrieve('timerB'));
}
});
});
答案 0 :(得分:1)
反正。这是毁灭。事件未被委派。即你的选择器是第一个div,但这是一个获得UID
的物理元素和一个功能性的cllback。
通过执行.destroy()
您将从dom中删除此div,即使您之后重新插入它,因为您不使用事件委派,事件将不再起作用(事件是元素存储的一部分,因此销毁也删除它们。)
结帐http://jsfiddle.net/dimitar/3j3Ws/1/ - &gt;证明它可以正常工作(为了简单.show()
和.hide()
,我添加了更多mootools,但你可以使用.setStyle("display", "none")
。
或者,将document.id("option")
的事件视为click:relay(div.down)
,并将x html修改为class='down'
- 然后您的代码将会保留。
答案 1 :(得分:0)
最有可能的是:
$$('ul#option li.selected div').destroy();
此时,您正在删除先前插入的<div>v</div>
并将点击事件附加到。
稍后在mouseleave中,您可以:
$$('ul#option li.selected').set('html',x);
重新创建div,但还没有将点击处理程序重新附加到新副本。
评论后续:
当您使用.set('html', x)
时,您将使用新节点替换原始节点,这也取代了事件处理程序。处理程序附加到实际节点,而不是DOM树中节点的位置。