Динамически добавленные флажки в мобильном приложении JQuery некорректно отображаются в браузере Android

Я создал страницу викторины в мобильном приложении 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();

Скриншоты:

Флажки в стандартном браузере Android

Флажки в браузере Chrome

JS Fiddle: jsfiddle.net/f5xkcc08/


jquery css jquery-mobile android-browser
person sewi22    schedule 03.03.2015    source источник
comment
Попробуйте запустить сценарий в событии pagecreate, а также создайте все элементы DOM как одну строку и добавьте все это целиком один раз в конце. Вы обновили скрипт: jsfiddle.net/ezanker/f5xkcc08/1. Посмотрите, имеет ли это значение   -  person ezanker    schedule 03.03.2015
comment
Спасибо за ваш комментарий. Я пробовал это, но, к сожалению, это не помогло. Также страница должна загружать новые данные при каждом вызове, поэтому событие pagecreate не подходит для моих намерений.   -  person sewi22    schedule 03.03.2015

Ответы (1)


arrow_upward
0
arrow_downward

Я узнал, что проблема где-то в моих данных. Я получаю ответы как результат запроса к БД и помещаю их в массив «answersArr». В качестве альтернативы я создал второй массив «answersArray» с жестко запрограммированными ответами.

Когда я использую "answersArr" во втором цикле for для создания флажков, у меня возникает проблема, упомянутая выше. Когда я использую "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();
});
person sewi22    schedule 04.03.2015