Не отвечающее событие OnMouseOver в динамически создаваемом вложенном DIV

Question

Я использую JavaScript для создания карты для игры, и каждая плитка - это отдельный div.Чтобы разместить карту на моем сайте, я добавляю их все в другой div.

Так, например,
<div id="mapBox"><br> <div id="tile" ... ></div><br> <div id="tile" ... ></div><br> </div>

Создаются div #tileиз данных в файле XML, поэтому они генерируются динамически.На каждом #tile у меня есть onmouseevent, который запускает функцию (пока что alert (1) только для того, чтобы она заработала), но, кажется, она никогда не срабатывает.запускает его, но я не могу заставить его работать на #tile div.

Любая помощь с этим будет оценена, спасибо!

Answer 1

Не уверен, как вы выбираете #tile делений, но недопустимо иметь несколько элементов с одинаковым идентификатором.

Выбор с использованием дублирующих идентификаторов часто даст вам только первое совпадение (илинекоторое другое непредсказуемое поведение).

Когда требуется дублирующий идентификатор, вы должны использовать класс вместо идентификатора.

<div id="mapBox">
    <div class="tile" ... ></div>
    <div class="tile" ... ></div>
</div>

Answer 2

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

Во-вторых, вы должны использовать .delegate()метод на #mapBox после определения класса на плитках, как этот

$('#mapBox').delegate('.tile', 'mouseover', function(e){
    //do whatever here
})

пример на http://jsfiddle.net/nXa27/1/

---

Обновление

Извините, не видел, что вы не говорили о jquery ..

Вот пример с чистым javascript http://www.jsfiddle.net/AvJf7/

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