Question

我在Jquery Mobile App中创建了一个带有一组动态添加的复选框的测验页面。使用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 /

Answer 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();
});

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

1 个答案: