jquery-mobile - AJAX 更新的 Jquery Mobile 问题

Question

我在使用 JQuery Mobile 中的单选按钮时遇到了一个非常奇怪的问题。我正在用 ajax 填充一些单选按钮。当我第一次这样做时没问题，但任何后续加载似乎都会导致显示出现问题 - 每个复选框都是单独显示的，而不是在一个列表中。

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 看起来像

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

这让我发疯!

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>