Выдача динамически генерирующей таблицы

Я делаю таблицу с использованием jquery, где идентификаторы плиток генерируются с помощью вложенного цикла FOR. Я пытаюсь добавить и прослушиватель событий к плиткам, используя их идентификаторы, поэтому я могу запускать функцию при нажатии на них. Однако идентификатор, хранящийся в переменной boatStatusClient, не распознается и выдает ошибку. Может ли кто-нибудь увидеть проблему?

for (y_client = 1; y_client < 11; y_client++) {
    battlefield_client += "<tr>";
    for (x_client = 1; x_client < 11; x_client++) {
        battlefield_client += "<td onclick = '' class = 'tile' style='border: 3px solid black;' id=" + "cell_client_" + x_client + "_" + y_client + "><pre>     </pre></td>";
        boatStatusClient = document.getElementById('cell_client_' + x_client + "_" + y_client);
        console.log(boatStatusClient);
        boatStatusClient.addEventListener("click", function(){boatGrid.placeBoat_client()});
    }
    battlefield_client += "</tr>";
}
$(document).ready(function() {
    $("#tableGrid_client").html(battlefield_client); //loads table

javascript,jquery,addeventlistener,

0

Ответов: 3

0 принят

Посмотрите, что ваша функция события выполняется перед созданием элемента DOM!

Попробуй это:

for (y_client = 1; y_client < 11; y_client++) {
    battlefield_client += "<tr>";
    for (x_client = 1; x_client < 11; x_client++) {
        battlefield_client += "<td onclick = '' class = 'tile' style='border: 3px solid black;' id=" + "cell_client_" + x_client + "_" + y_client + "><pre>     </pre></td>";
    }
    battlefield_client += "</tr>";
}
$(document).ready(function() {
    $("#tableGrid_client").html(battlefield_client); //loads table
    $('.tile').click(function() {
        boatGrid.placeBoat_client();
    });
});
2

Похоже, вы пытаетесь найти элемент с document.getElementById (), которого нет в DOM.

Сначала добавьте его на страницу, затем выполните поиск и добавьте соответствующее событие listenrs.

Но вы должны действительно думать о том, чтобы делать это с document.createElement (или объектами jQuery), а не конкретизировать строки. См. Этот вопрос для более углубленного обсуждения.

0

Как уже упоминалось фистуки, вы пытаетесь достичь элемента, который еще не находится в DOM, и поэтому вы не можете его получить.

Делая это:

battlefield_client += "<td onclick = '' class = 'tile' style='border: 3px solid black;' id=" + "cell_client_" + x_client + "_" + y_client + "><pre>     </pre></td>";

Вы делаете только строку, которая содержит это, но вы никогда не вставляете его в dom - ну, по крайней мере, не до того, как вы попытаетесь получить этот фактический элемент.

Итак, что вы хотите сделать: добавьте эту строку в view / dom :-) Затем вы сможете получить ее с помощью вашего вышеописанного метода.

Кроме того, я бы предпочел лучше разместить кавычки, а не смешивать использование одно- и двухквартирных. Мое предложение было бы всегда использовать одинарные кавычки при написании JavaScript и двойные кавычки при написании html.

JavaScript, JQuery, addeventlistener,
Похожие вопросы
Яндекс.Метрика