Mootools“事件”仅在第一次“单击”时起作用，之后停止工作。为什么？

Question

Mootools Events 仅在第一次点击时起作用，之后停止工作。
希望有人对此有疑问：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>​

Mootool 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 和针对它的功能回调。

通过执行 .destroy() 您将从 dom 中删除此 div，即使您之后重新插入它，因为您不使用事件委托，该事件将不再起作用（事件是元素的一部分存储，因此销毁也会删除它们）。

查看 http://jsfiddle.net/dimitar/3j3Ws/1/ ->证明它可以正常工作（我添加了更多的mootools以方便 .show() 和 .hide() 但你可以只使用 .setStyle("display",或者

，看看为 document.id("option") 执行一个事件 click:relay(div.down) 和 mod x html 具有 class='down' - 那么您现在拥有的代码将保留。

Answer 2

最有可能是这样的：

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

此时，您正在删除之前插入并附加了点击事件的

v

。

在稍后的 mouseleave 中，您执行以下操作：

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

重新创建 div，但尚未将单击处理程序重新附加到新副本。

注释后续：

当您使用 .set('html', x) 时，您将用新节点替换原始节点，这也会替换事件处理程序。处理程序附加到实际节点，而不是 DOM 树中节点的位置。