javascript - 親ウィンドウでjquery .clickリスナーを更新して、新しい要素を操作します

Question

テーブルセルをクリックするとポップアップウィンドウが開き、そのテーブルに新しいテーブル行を追加する HTML テーブルがあります。そして、これらの行にも .click() リスナーを追加したいと思います。これは私のHTMLテーブルです

<table id="myTable" style="width: 100%;">
<tr><th></th><th>Kompetence</th><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th></tr>

<tr style=><td rowspan="2">My text</td>
<td>Some text</td><td class="hodnoceni 1">&nbsp;</td><td class="hodnoceni 2">&nbsp;</td><td class="hodnoceni 3">&nbsp;</td><td class="hodnoceni 4">&nbsp;</td><td class="hodnoceni 5">&nbsp;</td><td class="hodnoceni 6">&nbsp;</td></tr>
<tr><td>Another text</td><td class="hodnoceni 1" title="sum titl">&nbsp;</td><td class="hodnoceni 2">&nbsp;</td><td class="hodnoceni 3">&nbsp;</td><td class="hodnoceni 4">&nbsp;</td><td class="hodnoceni 5">&nbsp;</td><td class="hodnoceni 6">&nbsp;</td></tr>
<tr class="newPartOfTable"><td rowspan="50">This is new part of table</td><td id="testId" class="testClass">&nbsp;</td><td class="hodnoceni 1">&nbsp;</td><td class="hodnoceni 2">&nbsp;</td><td class="hodnoceni 3">&nbsp;</td><td class="hodnoceni 4">&nbsp;</td><td class="hodnoceni 5">&nbsp;</td><td class="hodnoceni 6">&nbsp;</td></tr>
</table>

これは私のjavascriptです

var possibleInputs = ["T", "A", "Ž", " "];

var curValue;
$("#myTable .hodnoceni").click(function() {
    var level;
    var index = 0;
    var rowIndex = $(this).parent().index();
    curValue = $(this).text();
    if(curValue == "T"){
        index = 1;
    }else if(curValue == "A"){
        index = 2;
    }else if(curValue == "Ž"){
        index = 3;
    }else{
        index = 0;
    }
    console.log("row index");
    console.log("total rows"+$("#kompetence tr").length);
    console.log("td clicked");
    var num = $(this).attr("class").match(/\d+/);
    $(this).text(possibleInputs[index]);
    console.log("Hodnoceni: "+num);
});
$(".newPartOfTable").click(function(){
    var rows = $("#kompetence tr").length;
    window.open("newPage.html?rows="+rows, "New popup", "width=600,height=300");
});

そして、これはテーブルに新しい行を追加するJavaScriptです（ポップアップにあります）

var table = window.opener.document.getElementById("myTable");
console.log(table);
var row = tabulka.insertRow(<%=paramTableRows %>);
for(var i = 0; i < 7; i++){
    var cell = row.insertCell(i);
    cell.innerHTML = "<%= paramTableRows %>";
    cell.className = "hodnoceni";
}

私がやりたいのは、テーブルに新しい行を追加した後、既存の .click() 関数をそれらにバインドしたいということです。

助けてくれてありがとう。

Answer 1

.on()を使用する

JavaScript によって追加された新しい要素は、DOM 準備完了時またはページ読み込み時に DOM の一部ではないため、イベント委任を使用する必要があります

$(document).on("click", "#myTable .hodnoceni", function() {

また

$("#myTable").on("click", ".hodnoceni", function() {

Answer 2

.on()のように使用できます

$("#myTable .hodnoceni").on('click', function() {
});

Answer 3

使用する.on()

置き換えるだけです：

$("#myTable .hodnoceni").click(function() {

と：

$(document).on('click', '#myTable .hodnoceni', function() {

これは、最初の DOM ロードでロードされた人だけでなく、将来の動的 DOM 要素に対してもクリック イベントをバインドします。

それが役立つことを願っています。

Answer 4

以下を使用する必要があります。

$('#myTable').on('click', '.hodnoceni', function(event) {
    event.preventDefault();
    ...  
});

これにより、 #myTable要素内の任意のセルにイベントがアタッチされ、ドキュメント要素ツリー全体をチェックする必要がなくなり、効率が向上します。

Answer 5

jQuery live は一部のバージョンで非推奨になりました。そのため、「on」を使用することをお勧めします。 http://api.jquery.com/on/

DOM 内の古いまたは新しいすべての要素に適用されます。

Answer 6

jquery live 関数を見たいと思うかもしれません

http://api.jquery.com/live/