Take the 2-minute tour ×

I am stuck trying to clone a radio fieldset using the jQuery Mobile framework. I would usually use the .live event or clone(true)

$(".cloneButton").live('click', function() {



However it does not work in this instance. The cloned radio buttons still control the original.

If anyone is familiar with jQuery Mobile I would appreciate your help.

See this example - http://jsfiddle.net/R65cn/

I took the radio sample code from http://jquerymobile.com/demos/1.0b2/#/demos/1.0b2/docs/forms/radiobuttons/index.html



share|improve this question
add comment

1 Answer

up vote 0 down vote accepted

This hasn't got anything to do with Jquery mobile, but with basic HTML / Javascript rules.

Because you are cloning the elements by using .clone(), all unique id's on the radio buttons(and other elements) are cloned as well and resulting in duplicated id's. Browsers will only use the first declared id they find and so this explains the behavior in your example.

When you click the second or third radio button combination, the browser will lookup the element with the id "radio-choice-1" and stops after the first hit (the radio button with the id "radio-choice-1" at the first radio button combination).

The only way to make your code work is to give each cloned element a unique id and also change the for attribute value on each label in to the new unique id.

share|improve this answer
Thanks Struikel. This was a school boy error, but thanks for pointing it out. I had code in place to increment ID's but overlooked the 'for' attributes. .find("*[id]").attr("id", function() { return $(this).attr("id") + elCount; }); Thanks again –  Chris Aug 28 '11 at 22:18
add comment

Your Answer


