從JavaScript動態添加tr元素的onclick事件

Question

我正在動態創建表，我需要為添加的每個元素添加一個onclick事件，但這需要添加動態參數，我已經嘗試了以下方法

trElements[i + 1].onclick = function () { 
    navigateToController('/Home/Client', "'" + machine.DeviceID + "'"); 
};

但這會將onclick事件顯示為navigationToController（'/ Home / Client'，“'” + machine.DeviceID +“'”）

而不是navigationToController（'/ Home / Client'，'DeviceName'）; 正如我想的那樣，我也嘗試過在HTML中包含onclick事件，並將DEVICEID替換為實際的deviceid。

var element = trElements[i + 1].outerHTML.replace('DEVICEID', machine.DeviceID);
trElements[i + 1].outerHTML = element; 

這顯示是正確的，但是在加載頁面時，頁面中仍然有deviceid？

我確信這確實很簡單...但是任何指針都將不勝感激。

Answer 1

我並不完全確定我了解這個問題，但這可能是范圍問題。 您可能需要使用bind創建具有DeviceID當前值的處理程序：

 var machineId = 0; function navigateToController(machineId) { alert(machineId); } function addRow() { var t = document.getElementById('thetable'); var tr = t.insertRow(); var td = tr.insertCell(); td.appendChild(document.createTextNode("machine " + machineId)); tr.addEventListener('click', navigateToController.bind(null, machineId)); machineId++; } 

 <button onclick="addRow()">Add Row</button> <table id="thetable"></table> 

但這會將onclick事件顯示為navigationToController（'/ Home / Client'，“'” + machine.DeviceID +“'”）

如果這就是您的意思，那么您將不會在標記中看到變量的值。

為什么不只是navigateToController('/Home/Client', machine.DeviceID ) ？ 已經是一個字符串了。 無需嘗試在其周圍添加引號。 您最終將得到一個包含引號的參數。

 var deviceId = 'theDeviceId'; // This is not what you want. Notice this alert includes the single quotes as part of the string: "'theDeviceId'" alert( "'" + deviceId + "'"); // This is what you want. This alert has just the (unquoted) value. alert( deviceId ); 

Answer 2

更好的方法是根本不執行此操作。

最好將事件處理程序附加到現有容器（在這種情況下，該表看起來不錯）並檢查冒泡事件。

使用jQuery非常簡單：

var myTable = $("table#theTable");
myTable.on("click", "tr", function(){ // Click event handler.
    var clickedRow = $(this);
    ...
});

如果需要與每一行相關的一些數據，只需將其附加到標簽的“ data-”屬性（即«data-myId =“ someId”»）中即可。 然后，您可以通過事件處理函數中的clickedRow.data（“ myId”）輕松讀取它們。

這樣，您就可以使用一個函數來處理所有行的所有事件。 更簡單，浪費的內存更少。

Answer 3

trElements[i + 1].onclick = (function () { 
    var deviceId = machine.DeviceID;
    return function(){
       navigateToController('/Home/Client', "'" + deviceId  + "'");
    } 
})();

Answer 4

好的，所以我無法深入地動態添加onClick函數，因此，我改變了代碼，並傳遞了一個ViewModel數組，其中包含創建表所需的所有數據，因此當我打開客戶端視圖時，我發送所有相關客戶端的列表，當我選擇所需的行時，我只傳遞了客戶端的單個viewmodel，然后使用c＃代碼@ model.variable更新html。 創建信號器代碼后，我可以輕松地從它們中更新這些代碼。

感謝大家的投入。

為了更新，我找到了一個解決方案，我可以創建元素，將數據添加到innerHtml並使用：

setAttribute（“ onclick”，“ navigateToController（'/ Home / Client'，'” + deviceId +“'）”）;

我在解決方案的另一部分中使用了它，並且可以正常工作...