AJAX 업데이트로 인한 Jquery 모바일 문제

Question

JQuery Mobile에서 라디오 버튼에 매우 이상한 문제가 있습니다. 아약스로 라디오 버튼을 채우고 있습니다. 처음에는 괜찮 았지만 이후의 모든로드가 디스플레이에 문제를 일으키는 것으로 보입니다. 각 체크 박스는 단일 목록이 아닌 개별적으로 표시됩니다. 그것은 나를 미치게있어

<div id='all' data-role="page"> 

    <div data-role="content"> 


    <div data-role="fieldcontain" id='word_container'> 


     <fieldset data-role="controlgroup" id='words'> 


     </fieldset> 
    </div> 
     </div> 

처럼

function getWords() { 

    var gig_id = $('#gigs').val(); 

    $.ajax({ 
     url: Nnn.serverLocation+'/words?gigid='+ gig_id, 
     success: function(data) { 
      Nnn.words = eval('(' + data + ')'); 
      displayWords(); 
     } 
    }); 
} 

function displayWords() { 
    $('#word_container').html('<fieldset data-role="controlgroup" id="words"></fieldset>'); 

    $('#words').html("<legend>It's:</legend>"); 
    $.each(Nnn.words, function(key, value) { 
     $('#words').append('<label for="'+value.Word+'" >'+value.Word+'</label><input type="radio" value="'+value.Word+'" id="'+value.Word+'" name="radio-choice-1" />');   
    }); 

    $('#words input').checkboxradio(); 

    $('body').page(); 
} 

html로 본다!

Answer 1

문제는 페이지에 적절한 CSS로드/표시가있는 것입니다. Ajax를 사용하여 페이지를 다시로드하는 경우 HTML5 data- * 속성을 사용할 수 없습니다. 예를 들어, jQueryMobile에서 버튼 컨트롤은 다음과 같이 표현된다 :

<a href="index.html" data-role="button">Link button</a> 

당신이 AJAX 호출에 같은 마크 업을 사용하는 경우 제대로 표시되지 않습니다. Firefox/Chrome/Opera-> 오른쪽 클릭 -> 요소 검사를 선택하고 거기에 표시된 마크 업을 사용하면됩니다. 따라서 버튼 컨트롤에 대한 적절한 마크 업은 다음과 같습니다.

<a class="ui-btn ui-btn-corner-all ui-shadow ui-btn-hover-c" data-role="button" href="index.html" data-theme="c"> 
    <span class="ui-btn-inner ui-btn-corner-all"> 
    <span class="ui-btn-text">Link button</span> 
    </span> 
</a>