dynamic listview with flip switch in jquery mobile show flip switch twice

Question

I use a jquery mobile listview which creates dynamic his entrys.
The list entries contain a flip toggle switch, in each entry of the listview.
But something going wrong that i couldn't find.
There a always 2 flip toggle switches in in each entry, one who's working an one who's not taking action by mouse events. Here my code

I've a short example on http://jsfiddle.net/joergtiedemann/zSXS3/3/

JS:

function Update() {
  $('#functionlist ul li').remove();
  var newListTitle = $('#titleTemplate').clone();
  newListTitle.appendTo('#functionlist ul');
  var newEntryRow = $('#entryTemplate').clone();
  newEntryRow.appendTo('#functionlist ul');
  $( '#flip-1').slider('refresh');
  $("#functionlist").trigger('create');
  $("#functionlist").listview('refresh');
};

Update();

This shows what happens Can anyone help me please.

Answer 1

Fixed it. The problem was that, on line 7, you had the button run .clone(), which made two buttons.

Updated JSFiddle: http://jsfiddle.net/zSXS3/5/

Answer 2

I had the exact same problem. After struggling for some hours I found a workaround. I took the flip toggle switch out of the entryTemplate an placed it as a template for itself. I only left the left the fieldcontain div in the template and gave it an ID.

Then, in the js-code, I first cloned the entryTemplate, then cloned the flip and appended it to the fieldcontain.

You can see the updated jfiddle here: http://jsfiddle.net/zSXS3/32/

 function Update() {
     $('#functionlist ul li').remove();

     var newListTitle = $('#titleTemplate').clone();
        newListTitle.appendTo('#functionlist ul');

        var newEntryRow = $('#entryTemplate').clone();

        var flipLabel = $('#labelflipTemp').clone();
        flipLabel.attr('for', "flip-1");
        var flip = $('#flipTemplate').clone();
                flip.attr('id', "flip-1");

        flipLabel.appendTo(newEntryRow.find('#flipsw-container'));
        flip.appendTo(newEntryRow.find('#flipsw-container'));

        newEntryRow.appendTo('#functionlist ul');

     $("select").slider();
     $("#functionlist").trigger('create');
     $("#functionlist").listview('refresh');
 };
Update();

I hope this helps. I'd appreciate any feedback to this workaround.