How to add dynamic jquery button?

Question

I have a table where I use jquery to add and delet rows. I also use jquery ui to render buttons.

When I add a new row, I also add a button in a cell, but this one is not rendered.

var tdata = "<tr>";
tdata += "<td align=\"right\">my data</td>";
tdata += "<td align=\"left\">";
tdata += "<button class=\"delete\">delete</button>";
tdata += "</td>";
tdata += "</tr>";

jQuery('#mytable > tbody:last').append(tdata);

Any idea, how to solve this ?

thx

UPDATE 1

Looks like I forgot to post one important detail :

$(document).ready(function() {  
jQuery('button.delete').button();
}

This works after loading the page but not for the new rows.

Solution

In the ready() function, you are creating jquery-ui styled buttons, but they will only apply to currently existing buttons.

Therefore, dynamically added buttons won't have this applied to them, so you'll have to modify your addRow function to apply the button() call in relation to the newly created markup.

Like this:

var tdata = "<tr>";
tdata += "<td align=\"right\">my data</td>";
tdata += "<td align=\"left\">";
tdata += "<button class=\"delete\">delete</button>";
tdata += "</td>";
tdata += "</tr>";
var tdataElement = jQuery(tdata);
jQuery('button.delete',tdataElement).button();
jQuery('#mytable > tbody:last').append(tdataElement);

Comments

[eemceebee]

Looks like I missed something important in my post... please have a look