Клонировать блок со всеми событиями
 

Доброго времени суток. Возникла проблема, никак не пойму почему не получается решить. Суть такая: скрипт при загрузке страницы создает див блок с надписью "Леонардо", вешает ему функцию смены фона при наведении на него курсора и помещает его в див блок BOX. Есть кнопка Клонировать, которая должна клонировать этот блок с надписью Леонардо со всеми событиями. Но на клонированных блоках нет функции смены фона. Как надо склонировать чтобы эти 2 блока ничем не отличались?

<div style="border:1px solid blue; cursor:pointer; width:100px; text-align:center; position:absolute" onclick=clone()>Клонировать</div>
<div class="name_container" style="border:1px solid blue; width:200px; height:100px; text-align:center; position:absolute; margin-left:110px " class="part_01"></div>

<script>
var div_block = document.createElement('div');
div_block.className = 'BOX';
div_block.style.border = '1px solid red';
div_block.style.cursor = 'default';
div_block.innerHTML = 'Леонардо'
div_block.onmouseover = function(){this.style.backgroundColor = 'green';}
div_block.onmouseout = function(){this.style.backgroundColor = '';}
document.getElementsByClassName('name_container')[0].appendChild(div_block)

function clone(){
var clone_div = document.getElementsByClassName('BOX')[0].cloneNode(true)
document.getElementsByClassName('name_container')[0].appendChild(clone_div)
}
</script>

фонарик,
После создания клона ноды вам надо навесить на неё обработчики. Обработчики не клонируются при создании клона.

Странное какое-то клонирование получается. У меня в блоке Леонардо еще с десяток блоков с функциями и стилями :cray:

фонарик,

<div class="to-clone" style="border:1px solid blue; cursor:pointer; width:100px; text-align:center; position:absolute">Клонировать</div>
<div class="name_container" style="border:1px solid blue; width:200px; height:100px; text-align:center; position:absolute; margin-left:110px " class="part_01"></div>

<script>

    function createElement(){
        var events = {
            mouseover: "green",
            mouseout: ""
        };
        var div_block = document.createElement('div');
        div_block.className = 'BOX';
        div_block.style.border = '1px solid red';
        div_block.style.cursor = 'default';
        div_block.innerHTML = 'Леонардо';
        Object.keys(events).forEach(function (eventName) {
            div_block.addEventListener(eventName, function () {
                this.style.backgroundColor = events[eventName];
            }, false);
        });
        document.querySelector('.name_container').appendChild(div_block);
    }

    window.addEventListener('DOMContentLoaded', function () {
        createElement();
        document.querySelector('.to-clone').addEventListener('click', createElement);
    }, false);
</script>

tsigel,
спасибо вам за вариант, но боюсь что я его не осилю. Простой перебор - дешего и сердито, зато мозг не сломаю ))

Если блок создан не через скрипт, то простое клонирование клонирует с обработчиками :-? Как так получается :-?

<div style="border:1px solid blue; cursor:pointer; width:100px; text-align:center; position:absolute" onclick=clone()>Клонировать</div>
<div class="name_container" style="border:1px solid blue; width:200px; height:200px; text-align:center; position:absolute; margin-left:110px " class="part_01">
<div class="BOX" onmouseover="this.style.backgroundColor = 'green'" onmouseout="this.style.backgroundColor = ''" style="border:1px solid red; cursor:default">Леонардо</div>
</div>

<script>
function clone(){
var clone_div = document.getElementsByClassName('BOX')[0].cloneNode(true)
clone_div.onmouseover = function(){this.style.backgroundColor = 'green';}
document.getElementsByClassName('name_container')[0].appendChild(clone_div)
}
</script>

атрибут
свойство

Как вариант вешать события через атрибуты:

http://jsfiddle.net/rbyapfn2/

А если тебе действительно нужно менять только стили при наведении, то в этом тебе поможет CSS псевдокласс - hover. :)