テーブルを動的に生成する問題

Question

jqueryを使用してテーブルを作成しています。ここで、タイルのIDは入れ子になったFORループを使用して生成されます。私は、それらのIDを使用して、タイルにイベントリスナーを追加しようとしているので、それらをクリックするときに関数を実行できます。ただし、変数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要素の作成前に実行されています。すでに述べたfistuksは、あなたが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(); 
    }); 
}); 

Answer 2

DOMに存在しないdocument.getElementById（）を持つ要素を探しているようです。

最初にページに追加し、関連するイベントリスナーを検索して追加します。

しかし、実際には文字列を連結するのではなく、document.createElement（またはjQueryオブジェクト）を使用してください。詳細については、this questionを参照してください。

Answer 3

として、及びそのためのあなたはそれを得ることはできません。

これを試してみてください。これにより

：

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

あなたはこれだけを保持している文字列を作るが、あなたがDOMに挿入したことがない - まあ、少なくともあなたは、実際の要素を取得しようとしないの前に。

あなたがしたいことは、この文字列をビューに追加することです/ dom :-) 次に、あなたは上記の方法でそれを得ることができるはずです。

さらに、私は引用符を置くことを検討し、一重引用符と二重引用符を混用しないようにします。私の提案は、JavaScriptを書くときには常に一重引用符を使用し、htmlを書くときには二重引用符を使用することです。