Мобильная форма JQuery теряет форматирование после первого просмотра - PullRequest
Новая
       2

Мобильная форма JQuery теряет форматирование после первого просмотра

2 голосов
/ 06 июня 2011

У меня есть страница в мобильном телефоне JQuery, которая содержит форму. Форма имеет как статические элементы (определенные в html), так и динамические элементы (созданные с помощью скрипта во время выполнения). Когда я в первый раз захожу на свою страницу, она корректно отображается при мобильном форматировании JQuery Если я вернусь, то снова открою форму, все форматирование динамических элементов потеряно. Я должен перезагрузить страницу, чтобы мои элементы снова выглядели правильно.

Я подозреваю, что DOM каким-то образом запутался. Я вызываю empty () для родительского элемента, содержащего динамическое содержимое, поэтому в DOM не должно быть дублированных элементов.

Воспроизведено это как в Chrome (windows), так и в браузере Andriod 2.3.

Ниже приведена упрощенная версия того, что я делаю. В реальном приложении элементы поступают из базы данных, поэтому большинство представлений формы могут содержать разные элементы. Следовательно, их нужно создавать заново каждый раз.

Чтобы увидеть поведение,

  1. нажмите ссылку "Показать форму",
  2. нажмите кнопку назад,
  3. затем снова нажмите ссылку «Показать форму». Вы заметите, что форматирование пропало.

Любые идеи будут с благодарностью

Скрипка: http://jsfiddle.net/tj4yF/1/

Код: 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <meta content=" initial-scale=1.0; maximum-scale=1.0;user-scalable=0;" />
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
             <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
                <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
                <script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>

                <script>
                    var g_aElementList = [];
                        g_aElementList.push( "<label for='ta'>General comment</label><textarea name='ta' id='ta' rows='3'></textarea>" );
                        g_aElementList.push( "<label for='num'>My Number</label><input type='number' name='num' id='num'/>");
                        g_aElementList.push( "<label for='chk'>My Checkbox</label><input type='checkbox' name='chk' id='chk' value='true'/>");

                    $("#pnlPage2").live("pagebeforeshow", function(event, ui) {

                        var jContainer = $("#elementContainer");

                        for( var cI=0; cI<g_aElementList.length; cI++ ) {
                            jContainer.append( "<li data-role='fieldcontain'>" + g_aElementList[cI] + "</li>" );    
                        }

                        jContainer.page();


                    });

                    $("#pnlPage2").live("pagehide", function(event, ui) {
                        $("#elementContainer").empty();
                    });

                </script>
        </head>
        <body>
            <div data-role="page" id="pnlPage1">
                <div data-role="header"> 
                  <h1>Page1</h1> 
                </div>
                <div data-role="content">
                    <a id="pnlTest" class="panel" href="#pnlPage2">Show form</a>
                </div>
                <div data-role="footer"> 
               </div>
            </div>
             <div data-role="page" id="pnlPage2">
                <div data-role="header"> 
                  <h1>Page2</h1> 
                </div>
                <div data-role="content">
                    <form id="frmTest">
                        <ul data-role="listview" data-inset="true" data-theme="c">
                            <div id="elementContainer"></div>
                        </ul>   
                    </form>
                </div>
                <div data-role="footer"> 
               </div>
            </div> 

        </body>
    </html>

1 Ответ

1 голос
/ 06 июня 2011

Не уверен, что происходит не так.Но я чувствую, что, возможно, удаление и добавление новых элементов dom на самом деле не является необходимым.Также вы можете поместить все в оболочку document.ready во избежание ошибок.

Почему-то есть проблема с опустошением #elementContainer.Обходной путь - это создать его динамически и затем удалить.

Редактировать: теперь он должен работать без скрытия / показа

Fiddle: http://jsfiddle.net/kkyWg/1/

Код: 

$(document).ready(function () {
    var g_aElementList = [];
    g_aElementList.push( "<label for='ta'>General comment</label><textarea name='ta' id='ta' rows='3'></textarea>" );
    g_aElementList.push( "<label for='num'>My Number</label><input type='number' name='num' id='num'/>");
    g_aElementList.push( "<label for='chk'>My Checkbox</label><input type='checkbox' name='chk' id='chk' value='true'/>");



    $("#pnlPage2").live("pagebeforeshow", function(event, ui) {
        $('<div id="elementContainer"></div>').appendTo("#list");

        var jContainer = $("#elementContainer");
        for( var cI=0; cI<g_aElementList.length; cI++ ) {
            jContainer.append( "<li data-role='fieldcontain'>" + g_aElementList[cI] + "</li>" );
        }
        jContainer.page();

    });

    $("#pnlPage2").live("pagehide", function(event, ui) {
        $("#elementContainer").remove();
    });
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...