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

Question

I am creating a table dynamically, I need to add an onclick event for each element as it is added, but this needs a dynamic parameter add, I have tried the following

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

but this shows the onclick event as navigateToController('/Home/Client', "'" + machine.DeviceID + "'")

and not navigateToController('/Home/Client', 'DeviceName'); as I thought it would, I have also tried to have the onclick event in the html, and replace the DEVICEID with the actual deviceid.

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

this shows up as been correct, but when the page is loaded, it still has deviceid in there ?

I am sure it is something really simple... but any pointers would be appreciated.

Answer 1

I'm not entirely sure I understand the question, but it might be a scope issue. You might need to use bind to create the handler with the current value of 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> 

but this shows the onclick event as navigateToController('/Home/Client', "'" + machine.DeviceID + "'")

You're not going to see the value of the variable in the markup, if that's what you mean.

Why not just navigateToController('/Home/Client', machine.DeviceID ) ? It's already a string. No need to try to add quotes around it. You'd end up with a parameter that includes the quotes.

 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

The better way to do this is not to do it at all.

Better attach the event handler to existing container (the table in this case seems good) and check for bubbling events.

With jQuery is quite simple:

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

If you need some data related to each row, simply attach to it in "data-" attributes (ie «data-myId="someId"») of the tag. Then you could read them simply by clickedRow.data("myId") from event handler function.

This way you have single function to handle all events for all rows. Simpler and wasting too less mamory.

Answer 3

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

Answer 4

ok, so I couldn't get to the bottom of adding an onClick function dynamically, so, I changed my code around, and pass a viewModel array containing all the data I needed to create the table, so when I open the clients view, I send a list of all the relevant clients, and when I select the row I need, I just pass a single viewmodel of the client, I then update the html with the c# code @model.variable. I can easily update these from my signalr code once its created.

thanks for everyones input.

Just to update, I have found a solution I think, I could create the element, add the data to the innerHtml, and use:

setAttribute("onclick", "navigateToController('/Home/Client', '" + deviceId + "')");

I have used this in another part of my solution, and it works...