VPF::Это похоже на статик объекты... где ошибка?

fibray

Дата 8.10.2005, 04:19 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 5
Регистрация: 8.10.2005

Репутация: нет
Всего: нет

Код


<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 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137

Код


<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>

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

Zeroglif

Дата 8.10.2005, 11:43 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 644
Регистрация: 22.9.2005

Репутация: 28
Всего: 66

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 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 5
Регистрация: 8.10.2005

Репутация: нет
Всего: нет

Aliance

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

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

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

Код


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

Это сообщение отредактировал(а) fibray - 8.10.2005, 11:54

Aliance

Дата 8.10.2005, 12:00 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137

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

Это сообщение отредактировал(а) Aliance - 8.10.2005, 12:01

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

Sardar

Дата 8.10.2005, 12:17 (ссылка)

(нет голосов)

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317

Проблема в том что при изменении 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'));
}

--------------------

Опыт - сын ошибок трудных © А. С. Пушкин
Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
Оценить мои качества можно тут.

fibray

Дата 8.10.2005, 12:22 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 5
Регистрация: 8.10.2005

Репутация: нет
Всего: нет

Sardar

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

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

Aliance

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

Это сообщение отредактировал(а) fibray - 8.10.2005, 12:30

Sardar

Дата 8.10.2005, 12:40 (ссылка)

(нет голосов)

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317

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

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

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

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

--------------------

fibray

Дата 8.10.2005, 12:47 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 5
Регистрация: 8.10.2005

Репутация: нет
Всего: нет

Sardar

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

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

don't use " .innerHTML+= "

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

Sardar

Дата 8.10.2005, 15:29 (ссылка)

(нет голосов)

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317

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

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

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

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

--------------------

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »