jQuery 모바일 요소가 제대로 표시되지 않습니다.

Question

테이블을 표시하기 위해 jQuery Mobile을 사용하고 있습니다. 그러나 addMore 버튼을 사용하여 새 행을 추가하면 디스플레이가 꺼집니다! 왜 그래야만하지? 첫 번째 행을 따르는 것으로 가정합니다. 또한 브라우저에서 검은 색 주제로 표시됩니다 ...하지만 피들과 같이 흰색 인 것으로 가정합니다. 왜? 또한

var addmore = '<tr><td style="text-align: center">' + currentIndex + '</td>' + 
    '<td class="small">' + 
    '<div data-role="fieldcontain" class="ui-hide-label">' + 
    '<label for="number_' + currentIndex + '">Response Number</label>' + 
    '<input type="text" name="number_' + currentIndex + '" id="number_' + currentIndex + '" value="" placeholder="Response Number"/>' + 
    '</div></td><td>' + 


    '<div data-role="fieldcontain" class="ui-hide-label">' + 
    '<label for="label_' + currentIndex + '">Description</label>' + 
    '<input type="text" name="label_' + currentIndex + '" id="label_' + currentIndex + '" value="" placeholder="Description "/>' + 
    '</div></td></tr>'; 

, 내가 어떻게 행을 제거 할 수 있습니다

http://jsfiddle.net/BgxKW/1/

이 새 행을 추가하는 코드는 다음과 같습니다

내 바이올린입니까?

Answer 1

마지막으로 스타일 문제를 해결하려면 $(".config").trigger("create");을 원합니다.

업데이트 바이올린 링크는 http://jsfiddle.net/BgxKW/7/

$("#addMore").click(function() { 
    currentIndex = $(".config tr:last td:first").text() 
    if(currentIndex == ""){currentIndex = 0} 
    currentIndex = parseInt(currentIndex) + 1 
    var addmore = '<tr><td style="text-align: center">' + currentIndex + '</td>' + 
     '<td class="small">' + 
     '<div data-role="fieldcontain" class="ui-hide-label">' + 
     '<label for="number_' + currentIndex + '">Response Number</label>' + 
     '<input type="text" name="number_' + currentIndex + '" id="number_' + currentIndex + '" value="" placeholder="Response Number"/>' + 
     '</div></td><td>' + 


     '<div data-role="fieldcontain" class="ui-hide-label">' + 
     '<label for="label_' + currentIndex + '">Description</label>' + 
     '<input type="text" name="label_' + currentIndex + '" id="label_' + currentIndex + '" value="" placeholder="Description "/>' + 
     '</div></td></tr>'; 

    ++currentIndex; 
    $('#labels .config tr:last').after(addmore); 
    $(".config").trigger("create"); 
}); 

$("#remove").click(function(){ 
    $(".config tr:last").remove(); 
}); 

주 : 나는 스타일의 문제를 해결하고 기능을 제거합니다.