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'm trying to use the following code to clone a form and increment the name and id values on each instance of the cloned form.

function newObservation() {
    var len = $('.observation').length;
    var titleLen = $('.observation').length + 2;
    var $html = $('.observationTemplate').clone();

    $('.observationTitle:eq(0)').text("Observation - " + titleLen);
    $html.find('[name=audit-observation-category]').eq(0).attr({name:"audit-observation-category" + len, id:"audit-observation-category" + len});
    $html.find('[name=audit-observation-notes]').eq(0).attr({name:"audit-observation-notes" + len, id:"audit-observation-notes" + len});
    $html.find('[name=audit-observation-recommendation]').eq(0).attr({name:"audit-observation-recommendation" + len, id:"audit-observation-recommendation" + len});
    $html.find('[name=audit-observation-severity]').eq(0).attr({name:"audit-observation-severity" + len, id:"audit-observation-severity" + len});
    $html.find('[name=audit-observation-person]').eq(0).attr({name:"audit-observation-person" + len, id:"audit-observation-person" + len});
    $html.find('[name=audit-observation-date]').eq(0).attr({name:"audit-observation-date" + len, id:"audit-observation-date" + len});
    return $html.html();
}
$(document).on('pageinit', function(){
    $('<div/>', {
        'class' : 'observation', html:newObservation()
    }).appendTo('#auditContainer');

    $('#auditObservationButton').click(function() {
        $('<div/>', {
            'class':'observation', html:newObservation()
            }).hide().appendTo('#auditContainer').slideDown('slow');
    });
    $('#auditForm').on('click', '.close', function(){
        $(this).parent().fadeOut();
    });
});

Here is a fiddle, which outlines the code but doesn't work due to jQM erros in the library itself (or so says jsfiddle) http://jsfiddle.net/FL398/

Here is an example of what Im encountering http://dirtybirddesignlab.com/FireSafe/audit.html#auditForm if you click 'Add Observation' the form clones, increments the name and id attributes of the elements correctly but they are in accessible.

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).