JQuery показать / скрыть в JQuery Mobile

Question

У меня очень простое мобильное приложение JQuery.Когда пользователь нажимает кнопку «Настройка», я хочу перенаправить его на другую страницу, которая запрашивает у него адрес электронной почты.Я хочу хороший переход "слайд" между двумя страницами.Тем не менее, кажется, что есть компромисс.

В принципе, если в моей кнопке «Настройка», как показано ниже, у меня есть «rel =« external »», пользователь переходит на следующий экран.Однако перехода нет.Но если я уберу 'rel = "external"', я получу переход, но в верхней части следующего экрана появится маленькая красная полоса.Эта красная полоска явно является моей ошибкой.Это как .hide код не вызывается.

В таких ситуациях, как я должен вызывать такие функции, как .hide?Я явно хочу сначала скрыть элемент errMsg.Но я не уверен, как это сделать, хотя все еще допускаю приятные переходы, выделенные JQuery Mobile.

Home.html

<div data-role="page">
  <div data-role="header"><h1>My App</h1></div>

  <div data-role="content"> 
    <div><a href="/setup" rel="external" data-role="button">Setup</a></div>
  </div>
</div>

Setup.html

<div data-role="page">
    <div data-role="header"><h1>Setup</h1></div>

    <div data-role="content">   
        <div id="errorMsg" style="background-color:red; padding:2px 0px 2px 8px; margin-bottom:6px;"></div>

        <label for="emailTextBox">Email Address</label>
        <input id="emailTextBox" type="email" /><br />  
    </div>
</div>

<script type="text/javascript">
  $(document).ready(function () {
    $("#errorMsg").hide();
  });
</script>

Спасибо за любую помощь / советы, которые вы можете предоставить.

Answer 1

Не используйте $(document).ready() в своем коде jQueryMobile. Вместо этого захватите pageinit событие, как объяснено здесь .

В этом случае вам может понадобиться что-то вроде:

$(':jqmData(role="page")').live('pageinit', function(event) {
  $("#errorMsg").hide();
});

Answer 2

попробуйте обновить код setup.html, как показано ниже

    <div data-role="page">
    <div data-role="header"><h1>Setup</h1></div>

    <div data-role="content">   
        <div id="errorMsg" style="background-color:red; padding:2px 0px 2px 8px; margin-bottom:6px;"></div>

        <label for="emailTextBox">Email Address</label>
        <input id="emailTextBox" type="email" /><br />  
    </div>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#errorMsg").hide();
         });
     </script>

</div>

Answer 3

Ваш error div должен находиться на уровне страницы, за пределами верхнего, нижнего или нижнего колонтитула.

Answer 4

Я полагаю, что вы столкнулись с этой проблемой: если rel = "external" не применен, вызов для получения страницы выполняется через ajax, что означает, что функция готовности документа не запускается снова.Где, когда атрибут rel = "external" будет идти и делать полный пост обратно, будет вызывать вашу готовую функцию.

Стоит также отметить, что строки запросатакже не 100% "свежий" при использовании вызовов ajax.По этой причине я был вынужден сделать полный пост обратно больше раз, чем я первоначально надеялся.

Вернемся к вашему решению, либо сделайте полный пост обратно с использованием внешнего атрибута, либо измените событие, чтобы разрешитьзапускать при вызове ajax.