Mootools `Events` работает только по первому`click`, после прекращения работы. Зачем?

Question

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'));
    }
    });
});​

Answer 1

Странный стиль письма у вас есть.

тем не мение. это уничтожить. события не делегированы. то есть ваш селектор является первым div, но это физический элемент, который получает UID и функциональный ответ против этого.

при выполнении .destroy() вы удаляете этот div из dom, и даже если вы вставляете его после, потому что вы не используете делегирование событий, событие больше не будет работать (события являются частью хранилища элементов, поэтому destroy также удаляет их).

проверить http://jsfiddle.net/dimitar/3j3Ws/1/ -> доказывает, что он может работать нормально (я добавил mootools больше для простоты .show() а также .hide() но вы можете просто использовать .setStyle("display", "none"),

в качестве альтернативы, посмотрите на проведение мероприятия для document.id("option") как click:relay(div.down) и мод X HTML, чтобы иметь class='down' - тогда код, который вы имеете на данный момент, сохранится.

Answer 2

Скорее всего это:

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

В этот момент вы удаляете <div>v</div> что вы вставили ранее и прикрепили событие click к.

В отпуске мышью позже вы делаете:

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

который воссоздает div, но не привязывает обработчик кликов к новой копии.

продолжение комментария:

когда вы используете .set('html', x)вы заменяете исходный узел новым, который также заменяет обработчики событий. Обработчики присоединяются к реальному узлу, а не к местоположению узла в дереве DOM.