jQuery mobile cloned form elements not working

Question

I am cloning a form in jQuery mobile and the cloned form elements do not seem to work. IE the select lists do not change value, you cannot slide the range sliders.

I

Answer 1

If you use Firebug, I recommend installing the Firequery add-on which will show all objects created by jQuery (and jQuery Mobile) on DOM elements.

You will see that none of the JQM widgets in your cloned form have objects set, meaning that while the UI looks correct, the elements are not enhanced, so they will not work.

In JQM 1.4 you can simply call $(your_form).enhanceWithin() to have JQM render all elements inside your cloned form. In JQM 1.3.2 this is not available, so I guess you would have to initialize things using trigger("create") for example.

Another point: It looks like you are pre-enhancing the markup (= doing JQMs work). Problem with this will be that your elements will look nice, but won't work without the "JQM treatment". This is why in 1.4 enhanced option is added to the first widgets, meaning you can set data-enhanced="true" in the source code and JQM will only create the object ("functionality") and not touch up the UI. Again for 1.3.2 this is not available. It can be hacked together, but is a lot of work to maintain, so I'd rather use 1.4 if you pre-enhance and insist on it. Otherwise try calling

$(document).find("form").trigger("create")

to see what I mean :-)

Last tip: I ran your page through the W3C validator. There are still a number of issues including a handful of duplicate ids, which will also break your page on some browsers (spell IE).