JQuery Mobile - второй клик иногда не выделяет навигационную кнопку

-1

Я создаю свое первое приложение JQuery Mobile. У меня есть следующий html:JQuery Mobile - второй клик иногда не выделяет навигационную кнопку

<head> 
    <link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css"> 
    <script src="js/jquery-2.2.0.min.js"></script> 
    <script> 
     $(document).bind('mobileinit',function(){ 
     // $.mobile.changePage.defaults.changeHash = false; 
     // $.mobile.hashListeningEnabled = false; 
      $.mobile.pushStateEnabled = false; 
     }); 
    </script> 
    <script src="js/jquery.mobile-1.4.5.min.js"></script> 
</head> 

<body> 
<!-- INDEX - TOP --> 
<div data-role="page" id="pg-index"> 

    <div data-role="header"> 
     <h1>APP</h1> 
    </div><!-- /header --> 

    <div role="main" class="ui-content"> 
     <h3 id="db-title">Add Client</h3> 
    </div><!-- /content --> 

    <div data-role="footer"> 
     <div data-role="navbar"> 
      <ul> 
       <li><a href="#" data-icon="grid" class="ui-btn-active">Summary</a></li> 
       <li><a href="#pg-settings" data-ajax="false" data-icon="gear">Settings</a></li> 
       <li><a href="#pg-about" data-ajax="false" data-icon="info">About</a></li> 
      </ul> 
     </div> 
    </div><!-- /footer --> 

</div><!-- /page --> 
<!-- INDEX - BOTTOM --> 

<!-- SETTINGS - TOP --> 
<div data-role="page" id="pg-settings"> 

    <div data-role="header"> 
     <h1>APP</h1> 
    </div><!-- /header --> 

    <div role="main" class="ui-content"> 
     <h3 class="ui-bar ui-bar-a">Settings</h3> 
     <form> 
       <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true" id="ss-ctrl-units"> 
        <legend> 
         Units of Measurement: 
        </legend> 
        <input name="ctrl-units-1" id="ctrl-units-1" value="metric" checked="checked" type="radio"> 
        <label for="ctrl-units-1">Metric</label> 
        <input name="ctrl-units-1" id="ctrl-units-2" value="imperial" type="radio"> 
        <label for="ctrl-units-2">Imperial</label> 
       </fieldset> 
      </form> 
      <div id="sg-Metric" class="hide-object-none"> 
       <p>Data will be displayed and recorded in metric units.</p> 
       <p>Examples:</p> 
       <ul> 
        <li>Height: 182 cm (one-hundred and eighty-two centimeters)</li> 
        <li>Weight: 85.22 kg (eighty-five kilograms)</li> 
       </ul> 

      </div> 
      <div id="sg-Imperial" class="hide-object-none"> 
       <p>Data will be displayed and recorded in imperial units.</p> 
       <p>Examples:</p> 
       <ul> 
        <li>Height: 5'4" (five feet, four inches)</li> 
        <li>Weight: 154 lb (one-hundred and fifty-found pounds)</li> 
       </ul> 
      </div> 
    </div><!-- /content --> 

    <div data-role="footer"> 
     <div data-role="navbar"> 
      <ul> 
       <li><a href="index.html" data-ajax="false" data-icon="grid">Summary</a></li> 
       <li><a href="#" data-icon="gear" class="ui-btn-active">Settings</a></li> 
       <li><a href="#pg-about" data-ajax="false" data-icon="info">About</a></li> 
      </ul> 
     </div> 
    </div><!-- /footer --> 

</div><!-- /page --> 
<!-- SETTINGS - BOTTOM --> 

<!-- ABOUT - TOP --> 
<div data-role="page" id="pg-about"> 

    <div data-role="header"> 
     <h1>APP</h1> 
    </div><!-- /header --> 

    <div role="main" class="ui-content"> 
     about stuff 
    </div><!-- /content --> 

    <div data-role="footer"> 
     <div data-role="navbar"> 
      <ul> 
       <li><a href="index.html" data-ajax="false" data-icon="grid">Summary</a></li> 
       <li><a href="#pg-settings" data-ajax="false" data-icon="gear">Settings</a></li> 
       <li><a href="#" data-icon="info" class="ui-btn-active">About</a></li> 
      </ul> 
     </div> 
    </div><!-- /footer --> 

</div><!-- /page --> 
<!-- ABOUT - BOTTOM --> 
</body>

Я уже проверил StackOverflow. Самая близкая проблема, подобная моей, которую я мог найти, - Jquery Mobile Button is not working at Second Click. Я не смог найти дубликаты идентификаторов на своих страницах. Если я недостаточно внимательно смотрю ...

Активные кнопки Сценарии, которые работают: Резюме для настроек/настроек для сводки. Подсветка работает - настройки выделены. Резюме для настроек. Затем нажмите «Настройки» (снова). Подсветка работает - настройки выделены. Резюме к о/о сводке. Подсветка работ - Резюме выделено. Резюме к о. Затем нажмите «О программе» (снова). Подсветка работает.

Сценарии активных кнопок, которые не работают: Описание настроек, которые можно задать в настройках. Кнопка «Настройки» должна быть выделена. Это не. Резюме для параметра «О настройках». Кнопка «О программе» должна быть подсвечена. Это не.

Вопрос: как исправить сценарии, которые не работают?

источник

2016-01-20 Rob Welan

Если вы голосуете, пожалуйста, по крайней мере, объясните, почему. –

Я только что нашел это: добавьте класс «ui-state-persist» к активной кнопке. Это обеспечит активную настройку. Спрятан на равнине на http://demos.jquerymobile.com/1.4.5/navbar/.

источник

2016-01-20 07:41:37

JQuery Mobile - второй клик иногда не выделяет навигационную кнопку

ответ

Смежные вопросы