How to add a double-click event on a table row using JavaScript?

Question

var nextRow = tbl.tBodies[0].rows.length;
var row = tbl.tBodies[0].insertRow(nextRow);
row.setAttribute('ondblclick', "return move_to_x_graph();");

This code will add a double click event to the row. But the fact is that it does not work in the case of Internet Explorer. It works fine in all other browsers.

To add style, I process this:

var cell2 = row.insertCell(1);
var browser = navigator.appName;
if (browser == "Microsoft Internet Explorer") {
    cell2.style.setAttribute("cssText", "color:black; width:300px;");
} else {
    cell2.setAttribute("style", "color:black; width:300px;");
}

Can anyone help me add a double click event using Javascript which will also work in Internet Explorer?

Answer 1

Do not install event handlers with setAttribute, it does not work the way you would expect in IE. Instead, set it directly to the equivalent property of the element's event handler:

row.ondblclick = function() {
    return move_to_x_graph();
};

Answer 2

jQuery:

$(row).bind("dblclick", function(){return move_to_x_graph();});

, , :

$(row).find("td").bind("dblclick", function(){return move_to_x_graph();});

jquery, , . , Prototype .

Answer 3

Instead of passing a string argument. Try passing the function literal as follows:

row.setAttribute('ondblclick', function () {return move_to_x_graph();});