Проблемы с JQuery Mobile для нескольких страниц шаблона

Question

Проблемы с JQuery Mobile для нескольких страниц шаблона

0

Я столкнулся с проблемой с использованием JQuery mobile и нескольких страниц: с первой страницы я перехожу к # секунде, там у меня есть опция выбора с разными параметрами, и мне нужно обновить # вторую страницу по выбору... пока не проблема и кажется, что он работает правильно, но есть редкое поведение, которое я не могу избежать: если я перехожу вперед и назад между этими двумя страницами, когда я изменяю выделение на # второй странице, мне нужно сделать то, что мне нужно сделать повторяется как раз как раз, я пошел назад на первую страницу.

Попробуйте этот jsfiddle здесь:

Перейдите на страницу # второй страницы
Вариант изменения: появляется одно предупреждение
Вернитесь на первую страницу
Перейдите на страницу # второй страницы.
Опция "Изменить снова": появляется два предупреждения !!!

И так далее…

<!DOCTYPE html>
   <title>Page Title</title>
   <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
   <link type="text/css" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" rel="stylesheet" />
   <script type="text/javascript" src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
<body>
    <div data-role="page" id="first" data-theme="b">
        <div data-role="header">
            <h1>Page Title1</h1>
        </div><!-- /header -->

        <div data-role="content">
            <p>Page content goes here.</p>
            <a href="#second">Go to second page</a>
        </div><!-- /content -->

        <div data-role="footer">
            <h4>Page Footer1</h4>
        </div><!-- /footer -->
    </div><!-- /page -->

    <div data-role="page" id="second" data-add-back-btn="true" data-theme="b">
        <div data-role="header">
            <h1>Page Title2</h1>
        </div><!-- /header -->

        <div data-role="content">
            <p>
                <select name="listtemp" id="listtemp" data-native-menu="false">
                <option value ='1'>option 1</option>
                <option value ='2'>option 2</option>
                <option value ='3'>option 3</option>
        </select>
            </p>
        </div><!-- /content -->

        <div data-role="footer">
            <h4>Page Footer2</h4>
        </div><!-- /footer -->
    </div><!-- /page -->
 </body>
 </html>

JS

     $(document).on('pagebeforeshow', '#second', function(){   
       $('#listtemp').change(function() {
         alert('change option');
         //Do my stuff here when changing option
         //This code is done as times as times I go back first page…
       });
     });

user3452002 23 март 2014, в 13:15

Источник

0

я не понимаю твой проб. Можете ли вы сказать мне вашу актуальную проблему.
Bharanikumar 23 март 2014, в 11:57
0

я не могу вернуться на первую страницу этой скрипки ... я что-то упустил?
T J 23 март 2014, в 12:05
0

Используйте pagecreate вместо pagebeforeshow . Используйте первый, чтобы добавить слушателей. Используйте второй для управления DOM, например, показать / скрыть элементы и т. Д. Jsfiddle.net/Palestinian/7Ke4Z/9
Omar 24 март 2014, в 17:51

Показать ещё 1 комментарий

Теги:

javascript

jquery

html5

mobile

1 ответ

Ещё вопросы

я не понимаю твой проб. Можете ли вы сказать мне вашу актуальную проблему.
я не могу вернуться на первую страницу этой скрипки ... я что-то упустил?
Используйте pagecreate вместо pagebeforeshow . Используйте первый, чтобы добавить слушателей. Используйте второй для управления DOM, например, показать / скрыть элементы и т. Д. Jsfiddle.net/Palestinian/7Ke4Z/9

Neville Nazerane · Answer 1 · 2014-03-23T11-04-00.000Z

Конечно, это будет иметь такое поведение, так как вы добавили событие в событие pagebeforeshow. Это означает, что каждый раз, когда отображается страница, событие устанавливается.

Вы должны иметь в виду, что все функции события jQuery не устанавливаются, а добавляют событие. Следовательно, вы можете заменить $(document).on('pagebeforeshow', '#second' часть на $(document).ready(

.ready() должен использоваться в jQM.