Calling .html()
serializes the element to a string, so all event handlers and other associated data is lost. Here’s how I’d do it:
$("#myButton").click(function () { var test = $('<button/>', { text: 'Test', click: function () { alert('hi'); } }); var parent = $('<tr><td></td></tr>').children().append(test).end(); $("#addNodeTable tr:last").before(parent); });
Or,
$("#myButton").click(function () { var test = $('<button/>', { text: 'Test', click: function () { alert('hi'); } }).wrap('<tr><td></td></tr>').closest('tr'); $("#addNodeTable tr:last").before(test); });
If you don’t like passing a map of properties to $()
, you can instead use
$('<button/>') .text('Test') .click(function () { alert('hi'); }); // or $('<button>Test</button>').click(function () { alert('hi'); });