jQuery Mobile问题与AJAX更新 [英] Jquery Mobile problem with AJAX updates
问题描述
我在JQuery Mobile中的单选按钮遇到了一个非常奇怪的问题.我正在用ajax填充一些单选按钮.第一次执行时没问题,但随后的加载似乎会导致显示出现问题-每个复选框都单独显示,而不是显示在单个列表上.
I'm having a very weird problem with radio buttons in JQuery Mobile. I'm populating some radiobuttons with ajax. When I do it the first time it's ok, but any subsequent loads seem to cause problems with the display - each checkbox is displayed separately rather than on a single list.
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>
这让我发疯了!
推荐答案
问题在于页面中CSS的正确加载/显示.如果使用Ajax重新加载页面,则不能使用HTML5 data- *属性.例如,jQueryMobile中的按钮控件是这样表示的:
The problem is with the proper load/display of CSS in the page. If you reload the page using Ajax, you can not use HTML5 data-* attributes. For example, button control in jQueryMobile is represented like this:
<a href="index.html" data-role="button">Link button</a>
如果在ajax调用中使用相同的标记,则将无法正确显示该标记.您要做的是,Firefox/Chrome/Opera->右键单击->检查元素,然后使用此处显示的标记.因此,按钮控件的正确标记为:
If you use the same markup in the ajax call, it won't be displayed properly. What you have to do is, Firefox/Chrome/Opera->Right Click->Inspect Element and use the markup shown there. So, the proper markup for the button control would be:
<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>
这篇关于jQuery Mobile问题与AJAX更新的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!