Mootools`Events`只在第一次“点击”时工作，停止工作后。为什么？

Question

MootoolsEvents作品只是第一个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')); 
    } 
    }); 
});​ 

Answer 1

你有奇怪的写作风格。不管怎么说，它是毁灭。事件不会被委派。即您的选择器是第一个div，但这是一个物理元素，它获得了一个UID和一个功能性的cllback。

通过做.destroy()你正在从dom中删除这个div，即使你之后重新插入它，因为你不使用事件委托，事件将不再起作用（事件是元素存储的一部分，所以销毁也会删除它们）。

退房http://jsfiddle.net/dimitar/3j3Ws/1/ - >证明它可以正常工作（我加的mootools更容易.show()和.hide()但你可以只使用.setStyle("display", "none")

或者，看看做了document.id("option")事件作为click:relay(div.down)和MOD的X. HTML有class='down' - 那么你现在的代码将保持。

Answer 2

这很可能是这样的：

  $$('ul#option li.selected div').destroy(); 

此时，您正在删除之前插入的<div>v</div>并附加了单击事件。

在鼠标离开后，你这样做：

 $$('ul#option li.selected').set('html',x); 

它再现了格，但一直未还重新连接单击处理的新副本。

评论随访：

当您使用.set('html', x)，你用一个新的，这也取代了事件处理程序替换原来的节点。处理程序连接到实际节点，而不连接到节点在DOM树中的位置。