Question

我正在使用jquery创建一个表，其中tile的id是使用嵌套的FOR循环生成的。我正在尝试使用它们的ID向tile添加事件监听器，因此我可以在单击它时运行一个函数。但是，无法识别存储在变量boatStatusClient中的id，并抛出错误。有谁能看到这个问题？

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

Answer 1

看起来你试图找到一个DOM中不存在的document.getElementById（）元素。

首先将其附加到页面，然后搜索并添加相关的事件监听器。

但是，您应该考虑使用document.createElement（或jQuery对象）而不是连接字符串。有关更深入的讨论，请参阅this question。

Answer 2

看，你的事件函数是在创建DOM元素之前执行的！

试试这个：

Group

Answer 3

正如已经提到的那样，你正试图找到一个尚未进入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时使用双引号。

问题动态生成表

3 个答案: