Javascript onclick перестает работать, несколько динамически создаваемых div

Question

Я столкнулся со странной проблемой, я создаю много динамических div-ов. И я недавно узнал, что некоторые из моих div'ов не запускают событие onclick? Все элементы создаются с использованием одного и того же шаблона, так почему же некоторые не работают? Большую часть времени это 4-5 снизу. Если вы нажмете на одну из других, а затем повторите попытку, вы можете получить один из них для запуска. Но только время от времени.

Код для создания div:

// Code to loop thru the number of players and create the divs accordingly
for (fieldNumber = 0; fieldNumber < 18; fieldNumber++) {
        var holderDiv = CreateDiv('gameCellLarge', '');
        holderDiv.style.width = 150 + extraCellWidth + 'px'; // Ändra storleken beroende på antalet spelare

        if (fieldNumber == 0 || fieldNumber == 6 || fieldNumber == 8 || fieldNumber == 17)
            newField = CreateDiv('gameCellMedium borderFull gameText', gameText[fieldNumber]);
        else
            newField = CreateDiv('gameCellMedium borderWithoutTop gameText', gameText[fieldNumber]);
        holderDiv.appendChild(newField);

        for (playerNumber = 0; playerNumber < players.length; playerNumber++) {            
            holderDiv.appendChild(players[playerNumber].InitField(fieldNumber));
        }
        gameFieldDiv.appendChild(holderDiv);
    }




GameField.prototype.InitField = function(fieldNumber) {
var newField = document.createElement("div");
if (fieldNumber == 0 || fieldNumber == 6 || fieldNumber == 8 || fieldNumber == 17)
    newField.className = 'gameCellSmall borderFull gameText gameTextAlign';
else
    newField.className = 'gameCellSmall borderWithoutTop gameText gameTextAlign';

var instance = this;
if (fieldNumber == 6 || fieldNumber == 7 || fieldNumber == 17) { }
else
    newField.onclick = function() { instance.DivClick(fieldNumber); return false; }

this.fields[fieldNumber] = newField;
this.score[fieldNumber] = 0;
return newField;
}

Я добавил возвращаемое значение false в функцию click, но она по-прежнему ведет себя странно. Почему некоторые не запускаются? Я создаю около 18 делителей / игрок. Но это случается, даже если я просто создаю одного игрока.

Возможно, мне нужно отменить мероприятие, когда я закончу с ним? (Вроде возврата false; пытается сделать) Работает иногда, но не всегда ...

У меня закончились идеи, вот ссылка на сценарий. Может быть, я что-то пропустил. Сценарий Я немного его изменил, поэтому просто нажмите кнопку и нажмите на нижнюю часть игрового поля (yatzy, kåk и т. Д.). Это должно всплывающих уведомлений при нажатии. Иногда они работают, иногда нет.

Answer 1

Ваш код выглядит нормально, похоже, что CSS все портит.

Проблема в том, что элементы div 'gameCellLarge' не соответствуют фазе элементов div 'gameCellMedium' и 'gameCellSmall', которые они включают. Это потому, что у них есть «позиция: относительная; Атрибут стиля, который позволяет им бродить там, где они должны быть. (Вы можете визуально увидеть, что происходит, используя отладчик, который поставляется с большинством браузеров, например Firebug с Firefox или Инструменты разработчика с Chrome.)

Кликабельна только та часть поля gameCellSmall, которая перекрывается с включенным в нее блоком gameCellLarge. Вы обнаружите, что во всех полях есть активная область, но эта область сжимается по мере того, как вы добираетесь до нижней части таблицы. Это связано с тем, что большие клетки все больше смещаются по фазе с маленькими клетками, когда вы спускаетесь по столу. Но если вы нажмете на верхнюю часть окна, это сработает, хотя, если вы этого не поймете, ответ будет случайным и случайным.

В любом случае, вы можете решить эту проблему, удалив «position :lative» из стиля .gameCellLarge. Похоже, что это не имеет значения для макета, поэтому все должно быть в порядке. Вы также можете указать 'border: 1px solid black;' в стиле .gameCellLarge.

Надеюсь, это поможет.

Answer 2

Это не прямой ответ на вашу проблему, но такая ситуация является хорошим кандидатом на делегирование событий. Просто Google для этого, и вы найдете множество источников. Вот хороший - http://www.sitepoint.com/blogs/2008/07/23/javascript-event-delegation-is-easier-than-you-think/

Способ, которым это работает, заключается в том, чтобы прикрепить обработчик событий к родительскому контейнеру и перехватить всплывающие события. Затем вы можете получить источник события (event.srcElement в IE и event.target в Firefox) и делать что-то на его основе. В вашем случае, если вы прикрепите уникальный идентификатор к каждому из ваших интерактивных элементов div, вы можете проверить его и вызвать соответствующий обработчик событий.

Это гораздо более чистый способ выполнения задач, чем прикрепление многих обработчиков событий.

[Изменить] : Обнаружил вашу проблему. По сути, ваши gamecellLarge div не имеют высоты, потому что они содержат только плавающие элементы. Вы пытались исправить это, добавив height: 30px, но это заставляет div перекрывать следующий набор div. Если у вас есть Firebug, выделите элементы и увидите проблему. Вы нажимаете, всегда работает, если вы нажимаете верхнюю 1/3 поля.

Измените стиль на что-то вроде этого, и оно должно работать.

.gameCellLarge {
    clear: both;
    overflow: hidden;
    width: 200px;
    zoom: 1
}

Answer 3

Ну, во-первых, я собираюсь предположить, что те, которые не работают, НЕ создаются с полемNumber 6, 7 или 17.

Это в стороне ... Если проблема заключается в остановке распространения событий, вы можете попробовать что-то вроде следующего:

newField.onclick = function(e) {
     if (!e) var e = window.event;
     instance.DivClick(fieldNumber);
     if (e.preventDefault) e.preventDefault();
     else e.returnValue=false;
     return false;
}

Кроме этого, я не могу ничего проверить, чтобы выяснить проблему.

Answer 4

Как минимум три из них не инициируют никаких событий, потому что у них нет обработчика onClick:

if (fieldNumber == 6 || fieldNumber == 7 || fieldNumber == 17) { }

Я не уверен, что это то, о чем вы говорите, хотя, если вы скажете, что нижние 4 или 5 делений ничего не делают.