Question

我正在动态创建一个表，我需要为添加的每个元素添加一个onclick事件，但是这需要一个动态参数add，我试过以下

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

但是这会将onclick事件显示为navigateToController（＆＃39; / Home / Client＆＃39;，＆＃34;＆＃39;＆＃34; + machine.DeviceID +＆＃34;＆＃39;＆＃34）

而不是navigateToController（＆＃39; / Home / Client＆＃39;，＆＃39; DeviceName＆＃39;）;正如我想的那样，我也尝试在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事件显示为navigateToController（'/ 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＃code @ model.variable更新html。我可以在创建信号器代码后轻松更新这些代码。

感谢每个人的投入。

为了更新，我找到了一个解决方案，我认为，我可以创建元素，将数据添加到innerHtml，并使用：

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

我在我的解决方案的另一部分中使用了它，它可以工作......

从JavaScript动态添加tr元素的onclick事件

4 个答案: