addEventListener работает только на последнем объекте - PullRequest
Новая
       22

addEventListener работает только на последнем объекте

2 голосов
/ 28 октября 2009

В следующем коде кажется, что я получаю вызов 'otherboxclick' только для последнего добавленного блока (b1). Если я изменяю порядок добавления полей, всегда работает только последний.

Как мне заставить его работать на всех коробках? 

<html>
<head>
</head>
<body>

<script type="text/javascript">
    function otherboxclick(e){
        alert("other clicked");
    }

    function color_toggle_box(boxid, color, width, height, xpos, ypos)
    {
        this.boxid = boxid;

        document.body.innerHTML += 
            "<div id='" + boxid + "'; '; style='position:absolute;left:" + xpos + "px;top:" + 
            ypos +"px;width:" + width + "px;height:" + height + 
            "px;background:#000'></div>";


        this.boxdiv = document.getElementById(boxid);
        this.boxdiv.style.background = color;
        this.boxdiv.addEventListener('click', otherboxclick, true);
    }

    var b2 = new color_toggle_box("223", "#ff0", 100, 100, 205, 100);
    alert("b2 = " + b2.boxid);
    var b3 = new color_toggle_box("323", "#0ff", 100, 100, 100, 205);
    alert("b3 = " + b3.boxid);
    var b1 = new color_toggle_box("123", "#0f0", 100, 100, 100, 100);
    alert("b1 = " + b1.boxid);
</script>

</body>
</html>

Ответы [ 2 ]

2 голосов
/ 28 октября 2009

Чтобы объяснить, почему код Лиора работает, а ваш - нет: 

document.body.innerHTML +=

всегда ошибка. Он превращает ваши объекты документа в строку HTML, добавляет к этой строке некоторый текст, а затем повторно анализирует весь HTML обратно, чтобы создать новые объекты документа, которые заменят все старые.

В лучшем случае это будет работать, но будет немного медленным. Однако худшим побочным эффектом является то, что любая информация, которая не сериализуется в HTML, будет полностью потеряна. Сюда входят значения полей формы, свойства и ссылки JavaScript, а также прослушиватели событий. Итак, каждый раз, когда вы создаете color_toggle_box, вы уничтожаете все объекты, на которых у вас ранее были слушатели; следовательно, слушатели никогда не будут вызваны.

2 голосов
/ 28 октября 2009 
    function color_toggle_box(boxid, color, width, height, xpos, ypos)
    {
        this.boxid = boxid;

        this.boxdiv = document.createElement('DIV');
        this.boxdiv.id = boxid;
        this.boxdiv.style.position = 'absolute';
        this.boxdiv.style.left = xpos + "px";
        this.boxdiv.style.top = ypos + "px";
        this.boxdiv.style.width = width + "px";
        this.boxdiv.style.height = height + "px";
        this.boxdiv.style.backgroundColor = color;

        document.body.appendChild(this.boxdiv);
        this.boxdiv.addEventListener('click', otherboxclick, true);
    }
...