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

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

0 голосов
/ 11 августа 2010

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

Ответы [ 2 ]

1 голос
/ 11 августа 2010

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

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

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

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

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

0 голосов
/ 11 августа 2010

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

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

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

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

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

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

комментарий:

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

...