IE onclick doesn't trigger

I make a button dynamically with jquery after an event

var $btnRow = $('<input />')
    .attr('type', 'button')
    .attr('id', 'myID')
    .attr('onclick', 'AddChildRow(this);')
    .val('Row');
$btnRow.css({ 'width': '38px', 'padding': '0' });

the html generated is like :

<input type="button" id="myID" onclick="AddChildRow(this);" value="Row" style="width: 38px; padding: 0pt;">

I have a AddChildRow function in my js file. It's working perfectly in FF, but not in IE (it does not call the AddChildRow ). Has someone had the 开发者_运维百科same problem before? This button is part of dynamic DIV -> Table -> TR -> TD schema. Any help would be greatly appreciated.

Try binding the button click event differently and use the jQuery click event

var $btnRow = $('<input />')
    .attr('type', 'button')
    .attr('id', 'myID')
    .val('Row')
    .click(AddChildRow)
    .css({ 'width': '38px', 'padding': '0' });

$("div").append($btnRow);

function AddChildRow()
{
    alert(this.id);
}

http://jsfiddle.net/hunter/nSCHn/

Tested and working in IE 6/7/8/9

You can also use the jQuery's live() method. For example:

$("#myId").live('click', AddChildRow);

And insert the myId button on the page anytime you want since the live() method will "discover" it and bind the AddChildRow function to it.