Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > Это похоже на статик объекты... где ошибка?

Автор: fibray 8.10.2005, 04:19

Код


<html>
<body>
<div id=root></div>
</body>
<script>

var counter = 0;
function addButton(){
    counter++;
    var tag = document.getElementById("root");
    tag.innerHTML += "<button style='width:50;' id=btn_"+counter+">"+counter+"</button><br>";
    document.getElementById("btn_"+counter).number = counter;
    document.getElementById("btn_"+counter).onclick = function (){
        alert(this.number);
    }
}

function init(){
    for(var ii=0; ii<5; ii++) addButton();
    /*
        !!!! Only the last button alerts. Why? !!!
    */
}

init();

</script>
</html>

Пытаюсь динамически наполнять страницу контентом...
И все было бы хорошо, но куда-то деваются обработчики событий...
Выше приведен примерчик, где "алертит" только последняя кнопка.
А по идее должны все...
Объясните, плззз, что не так? Не понимаю.... smile

С уважением, fibray

Автор: Aliance 8.10.2005, 10:16

Код


<html>
<body>
<div id=root></div>
</body>
<script>

var counter = 0;
function addButton(){
    var tag = document.getElementById("root");
    tag.innerHTML += "<button style='width:50;' id=btn_"+counter+" onclick='alert(this.number)'>"+counter+"</button><br>";
    document.getElementById("btn_"+counter).number = counter;
}

function init(){
    for(var ii = 0; ii < 5; ii++) {
       counter++;
       addButton();
    }
}

init();

</script>
</html>

Автор: Zeroglif 8.10.2005, 11:43

fibray

Не знаю, насколько это тебе необходимо, но в этом примере можно было бы всё сделать без объявления глобального счётчика, внутри цикла...

Код


<html>
    <body>
        <div id="root"></div>
        <script type="text/javascript">
        (function F()
        {
            var i,tag=document.getElementById("root");
            for(i=1;i<6;i++)
            {
                tag.innerHTML+="<button style='width:50;' id='btn_"+i+"' number='"+i+"' onclick=alert(this.getAttribute('number'))>"+i+"</button><br>";
            }
        })()
        </script>
    </body>
</html>

Автор: fibray 8.10.2005, 11:53

Aliance

нет, это все хорошо... только это простейший примерчик, сгенереный специально для данного вопроса....

что предложите делать, если вместо алерта там будет 50-строчный обработчик

принципиальным является использование конструкции:

Код


someHTMLObject.onSomeEvent = function(){...}

Автор: Aliance 8.10.2005, 12:00

Тогда используй addEventListener. А на будущее: я написал пример, основываясь на задачах, не было сказано, что принцыпиально использование такого метода. Учти, тут нет экстрасенсов, пиши задачу в будущем полностью.

Автор: Sardar 8.10.2005, 12:17

Проблема в том что при изменении innerHTML браузер сериализует DOM дерево в текстовую разметку, в результате чего все связи убиваються. Затем браузер заного парсит код, собирает дерево обьектов и вставляет в документ. Поставь последней строчкой tag.innerHTML+=" "; и последняя кнопка тоже не будет работать.

Решение простое, работай на прямую с DOM деревом.

Код

function addButton(){
    counter++;
    var tag = document.getElementById("root");
    var bt=document.createElement('button');
    bt.setAttribute('style', 'width:50;');
    bt.number=counter;
    bt.innerHTML="Button "+counter;
    bt.onclick = function (){
        alert(this.number);
    }
    tag.appendChild(bt);
    tag.appendChild(document.createElement('br'));
}

Автор: fibray 8.10.2005, 12:22

Sardar

а почему при сериализации теряются безымянные функции?
и главное, как с этим бороться?

хм, а поможет ли использование this.e = document.createElement('...'); ?

Aliance

извини, не ругайся...

Автор: Sardar 8.10.2005, 12:40

Цитата(fibray @ 8.10.2005, 11:22)

а почему при сериализации теряются безымянные функции?
и главное, как с этим бороться?

Потому что DOM дерево (если не знаком, то тебе http://www.w3.org/DOM/) с расширениями в JS это нечто гораздо сложнее чем html вёрстка, ну нельзя засериализовать свойства обьекта. Тег(элемент) это обьект, но не каждый обьект это тег smile

в текст можно обратить только имя тега, содержимое и аттрибуты.

Автор: fibray 8.10.2005, 12:47

Sardar

спасибо.
пошел переделывать ВСЕ...

вывел для себя правило...

don't use " .innerHTML+= "

С уважением, fibray

Автор: Sardar 8.10.2005, 15:29

Цитата(fibray @ 8.10.2005, 11:47)

вывел для себя правило...
don't use " .innerHTML+= "

Очень удобное свойство, экономит массу кода smile

Просто нужно помнить что при сериализации обработчики событий побьються.