動的に追加された行にDBからデータをフェッチするサービスコールがありません

Question

動的に作成されているテーブルがあり、以下のコードを使用して行を追加するためにテーブルの行が複製されています。

function addButton(row) { 
    var addBtn = document.createElement("button"); 
    addBtn.setAttribute("class", "btn add-row"); 
    row.insertCell(-1).appendChild(addBtn); 
    addBtn.addEventListener('click', function addRow(event) { 
     var rowNode = event.currentTarget.parentNode.parentNode; 
     var newRowNode = rowNode.cloneNode(true); 
     rowNode.parentNode.insertBefore(newRowNode, rowNode.nextSibling); 
     var delBtn = document.createElement("button"); 
     delBtn.setAttribute("class", "btn del-row"); 
     newRowNode.deleteCell(); 
     newRowNode.insertCell(-1).appendChild(delBtn); 
     delBtn.addEventListener('click', function delRow(event) { 
      var currentRow = event.currentTarget.parentNode.parentNode; 
      currentRow.parentNode.removeChild(currentRow); 
     }); 
    }); 
} 

ただし、元の行にはDBから値を取得するためのサービスコールがあります。ここ は、データをフェッチするための機能である：ここ

var lovData = []; 
var serviceURL = "/scb/" + title + "/" + propName.replace(/\s/g, '') + 
    "lovData"; 

$.get(serviceURL, function (response) { 
    lovData = response; 
}).done(function() { 
    $("#" + id).autocomplete({ 
     source: lovData, 
     minLength: 0, 
     scroll: true 
    }).focus(function() { 
     $(this).autocomplete("search", ""); 
    }); 
}).fail(function() { 

}); 

問題は、クローン化されたノードのために保存するサービスコールを追加する方法を ...クローン化されている行は、任意のサービス呼び出しを行っていないということです。.. 助けてください...

Answer 1

イベントを各行に付ける代わりに$（document）.onを使用してみてください。 .on（）メソッドがドキュメントに適用されるとドキュメントの変更が監視され、セレクタに一致するものにイベントが適用されるため、同じクラスで作成された新しい行にはそのクリックイベントが確実に記録されます。 。

$(document).on("click", ".add-row", function(event) {   
    var rowNode = event.currentTarget.parentNode.parentNode; 
    var newRowNode = rowNode.cloneNode(true); 
    rowNode.parentNode.insertBefore(newRowNode, rowNode.nextSibling); 
    var delBtn = document.createElement("button"); 
    delBtn.setAttribute("class", "btn del-row"); 
    newRowNode.deleteCell(); 
    newRowNode.insertCell(-1).appendChild(delBtn); 
}); 

$(document).on("click", ".del-row", function(event) { 
    var currentRow = event.currentTarget.parentNode.parentNode; 
    currentRow.parentNode.removeChild(currentRow); 
});