Dynamically created html button not firing onclick()

[showens]

I have a table that has rows appended dynamically, based on the item selected from a dropdownlist. The rows have a number of cells, one with a literal control using the text of the dropdownlist, several checkboxes, and a button.


I am trying to use the button to delete the newly-added row if it was added by mistake. The row with its checkboxes, label and button gets added to the table, but the onclick event doesn't fire. Here's the relevant code snippet:

var tbl = document.getElementById('tblSelectedServices');
var tbody = tbl.tBodies[0];
var newRowNum = tbl.rows.length;
var svc = ddl[ddl.selectedIndex].value;
 
var newRow = document.createElement('TR');
var delcol = document.createElement('TD');
 
var delbtn = document.createElement('INPUT');
delbtn.setAttribute('type','button');
delbtn.setAttribute('id','del' + newRowNum);
delbtn.setAttribute('style','WIDTH: 17px; HEIGHT: 17px;');
delbtn.setAttribute("onclick","removeRow(" + newRowNum + ");");
 
delcol.appendChild(delbtn)
newRow.appendChild(delcol);
 
        ..... add more stuff .....
 
tbl.firstChild.appendChild(newRow);
 

I can see the new row and its attributes using a DOM viewer addin, but the style doesn't appear, nor does the onclick fire.

What am I missing??

[melchit20]

I am having the same problem. I am using AJAX and am writing out links with onclick's set to call a javascript function. However, once written out to the browser the link do not respond on click.

This is the php line that creates the onclick event for the link.

....
$data = $data."<br><a href='#' onclick='post(' showFile',$file ');'>$file</a>";
....

Even if I replace the post function with a simple javascript alert, it doesn't call it.
I'm not sure if it would affect this, but I have a function being called in the page onLoad event. However, the anchor tag is not linking anywhere, so it shouldn't post the page.

Thanks.

[iam_clint]

I would do something like this.

//delbtn.setAttribute("onclick","removeRow(" + newRowNum + ");");
delbtn.setAttribute("rownum", newRowNum);
delbtn.onclick = function () { removeRow(this.getAttribute("rownum")); }