"weird" things happening with .clone(true), button widget, and .remove()
I'm trying to setup a system where on load, i take the first row of the table and use it as a template. i then i have a click event that clones that template and adds it as a new row to the table. each row has a button withthe button widget applied to it that removes the row. Initially, i can add all the rows i want and they get the button styling, however, if i remove all of the rows after i've added one, adding more adds them without the button widget styling, but it still has the click event.
can anyone help me explain why this is happening? I haven't been able to figure much out about it yet. here is a jsbin showing the issue:
click add row several times, click the buttons that were added and the rows will be removed, then click on add row again once all of the rows are removed and the bug will occur. I've tested it in both chrome and IE7/8, so this appears to be a clone() .remove() and possibly .button() bug. I can't think of any reason why this would be happening. i'm not modifying the detached table row, it should change from removing all of the existing rows. it even loses the button text.