1

I can't seem to figure this out...

I have a table with 'x' rows. When I click on a button I want to clone the last table row and append it behind it. So far no problem. But I have a select (using selectmenu styling) in every table row.

I have made a quick example here: http://jsfiddle.net/u8Lpe/

When you click on 'Add table row' you can't select an option on the new added row. (it will just change the value of the row that's cloned)

I have searched and tried a lot of different things, but so far I haven't been able to fix it. (using refresh/destroy options etc.)

Hopefully someone can help me out, or has an idea what to do!

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
user985911
  • 27
  • 3

2 Answers2

1

There were couple of issues in your code. For the first row which you render along with page markup you apply selectmenu plugin on the select element inside it. selectmenu attaches few events and styles on it along with few extra markup.

When you clone(passing true as argument) the tbody which contains this select element with selectmenu plugin applied, everything is cloned. The true arguments tells jQuery to clone the events also applied on the elements, which is not required.

What you have to do is clone by passing false and after clone remove the extra span and inline style which the plugin adds and then call selectmenu on the new row select element.

I have fixed this in your fiddle take a look.

Demo

ShankarSangoli
  • 69,612
  • 13
  • 93
  • 124
  • Cheers! Works perfectly, thanks a lot. For those who have a similair issue, notice the there is still 'true' instead of 'false' in the demo above. Also I had to use div instead of span for some reason.Thanks. – user985911 Feb 05 '12 at 16:58
0

You are cloning an element that has an ID (this is bad, as IDs should be unique). You should change the ID before you reinsert it into the DOM. At the same time you can make the new element a selectmenu.

nachito
  • 6,975
  • 2
  • 25
  • 44
  • You're right, that's pretty bad. I guess I should change it to a class instead. But even than it doesn't solve the problem (http://jsfiddle.net/u8Lpe/2/), can you give an example what I should do to make it work? (I'm not a pro in this) Thanks again. – user985911 Feb 05 '12 at 15:44