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樹中的位置。