jquery 모바일 플립 스위치에서 플립형 스위치를 사용하는 동적 목록보기

Question

동적 인 항목을 만드는 jquery 모바일 목록 뷰를 사용합니다.
목록 항목에는 목록보기의 각 항목에 플립 토글 스위치가 있습니다.
하지만 뭔가 잘못되어서 찾을 수 없었습니다.
각 항목에는 항상 2 개의 플립 토글 스위치가 있습니다. 마우스 이벤트로 조치를 취하지 않는 사람이 있습니다.

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(); 

이 사람이 제발 도와 드릴 일이 무엇인지 보여줍니다 여기 내 코드

나는 http://jsfiddle.net/joergtiedemann/zSXS3/3/

JS에 대한 간단한 예를했습니다.

Answer 1

수정 됨. 문제는 7 번 줄에 두 개의 버튼을 만든 .clone() 버튼이 실행되었다는 것입니다.

는 JSFiddle 업데이트 :

Answer 2

http://jsfiddle.net/zSXS3/5/ 나는 똑같은 문제를 가지고 있었다. 몇 시간 동안 고생하고 나면 해결 방법을 찾았습니다. 나는 플립 토글 스위치를 entryTemplate 밖으로 가져 와서 템플릿 자체로 배치했습니다. 템플릿의 왼쪽 fieldcontain div 만 남겨두고 ID를주었습니다.

그런 다음 js 코드에서 entryTemplate을 복제 한 다음 플립을 복제하고 fieldcontain에 추가했습니다. 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(); 

난이 도움이되기를 바랍니다 :

는 현재 업데이트 된 jfiddle을 볼 수 있습니다. 이 해결 방법에 대한 의견을 보내 주시면 감사하겠습니다.