JQuery Mobile App 中动态添加的复选框在 Android 浏览器中未正确显示答案

【问题标题】：Dynamically added checkboxes in JQuery Mobile App not shown correctly in Android BrowserJQuery Mobile App 中动态添加的复选框在 Android 浏览器中未正确显示
【发布时间】：2015-05-04 05:06:58
【问题描述】：

我在 Jquery 移动应用程序中创建了一个测验页面，其中包含一组动态添加的复选框。使用 Chrome 或 Firefox 打开页面时，页面看起来不错。但不是在我的平板电脑或手机上的 Android 默认浏览器中。我想稍后用 Phonegap 创建一个原生包。外观将与默认浏览器相同。

我正在使用 Jquery 2.1.3 和 JQuery Mobile 1.4.5

HTML：

<div data-role="page" id="quiz">
<div id="quizHeader" data-role="header" data-position="fixed" data-theme="a" data-id="exp-header">
    <h1 id="quizHeadline"></h1>
</div>
<div data-role="content" id="quizContent"></div>
<div id="quizFooter" data-role="footer" data-theme="a" data-position="fixed" data-id="exp-footer">

Javascript：

    $("#quizContent").append('<fieldset id="quizCheckboxGroup" data-role="controlgroup"></fieldset>');

answersArr = [{id:1, answer:"Apfel"},{id:2, answer:"Banane"},{id:3, answer:"Orange"}];

for(var i=0; i<answersArr.length; i++){
    var a = answersArr[i];
    $("#quizCheckboxGroup").append('<input type="checkbox" name="quizCheckbox-'+a.id+'" id="quizCheckbox-'+a.id+'" value="'+a.id+'"><label for="quizCheckbox-'+a.id+'">'+a.answer+'</label>');
}

$("#quizContent").append('<a href="#" data-role="button" data-questiontype="mc" id="quizCheckButton">Antwort pr&uuml;fen</a>').enhanceWithin();

截图：

Checkboxes in Standard Android Browser

Checkboxes in Chrome Browser

JS 小提琴： jsfiddle.net/f5xkcc08/

【问题讨论】：

尝试在 pagecreate 事件中运行脚本，并将所有 DOM 项创建为一个字符串，并在最后附加一次。你更新了小提琴：jsfiddle.net/ezanker/f5xkcc08/1。看看这有什么不同
感谢您的评论。我试过这个，但不幸的是它没有效果。此外，页面应该在每次调用时加载新数据，因此 pagecreate 事件不适合我的意图。

标签： jquery css jquery-mobile android-browser

【解决方案1】：

我发现问题出在我的数据中。我从数据库查询中得到答案，并将它们推送到“answersArr”数组中。或者，我用硬编码的答案创建了第二个数组“answersArray”。

当我在第二个 for 循环中使用“answersArr”来创建复选框时，我遇到了上述问题。当我使用“answersArray”（硬编码的）时，所有复选框看起来都很好。

但我找不到区别？！两个数组的控制台输出看起来都不错。

getQuestionsAnswers(question.id, function(answers){
    answersArr = new Array();
    for(var a=0; a<answers.length; a++){
        answersArr[a] = {
            id: answers.item(a).id,
            answer: answers.item(a).answer
        }
    }
    answersArray = new Array();
    answersArray[0] = {id:1, answer:"Cherry"}
    answersArray[1] = {id:2, answer:"Peanuts"}
    answersArray[2] = {id:3, answer:"Strawberry"}

    var html = '';
    html += '<fieldset id="quizCheckboxGroup" data-role="controlgroup">';

    for(var i=0; i<answersArr.length; i++){
        var a = answersArr[i];
        html += '<input type="checkbox" name="quizCheckbox-'+a.id+'" id="quizCheckbox-'+a.id+'" value="'+a.id+'" questionId="'+question.id+'"><label for="quizCheckbox-'+a.id+'">'+a.answer+'</label>';
    }
   html += '</fieldset>';
   html += '<a href="#" data-role="button" data-questiontype="mc" id="quizCheckButton">Antwort pr&uuml;fen</a>';
   $("#quizContent").append(html).enhanceWithin();
});

【讨论】：