jQuery mobile data-rel = "обратная" ссылка, вызывающая неправильные события - PullRequest
Новая
       3

jQuery mobile data-rel = "обратная" ссылка, вызывающая неправильные события

3 голосов
/ 20 октября 2011

Взгляните на тест-кейс

При открытии ссылки запускается pagebeforeshow для стр. 1 . При нажатии на ссылку, чтобы перейти к страница 2 , pagebeforeshow для страница 2 срабатывает. Пока все хорошо.

Если вы затем используете левую кнопку (data-rel="back") для возврата, запускаются лишние события. Вместо этого использование правой кнопки (прямая ссылка на страница 1 ) делает то, что я ожидал, а именно, только pagebeforeshow для страница 1 срабатывает.

pagebeforeshow также можно заменить на pageshow, не имеет значения. Что здесь происходит?

(протестировано в обновленной версии Chrome)

Источник для справки: 

<html>
  <head>
    <meta charset="utf-8">

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css" />
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>

    <script>
      $('#test1').live('pagebeforeshow', function() {
          console.log("=== pagebeforeshow for #test1");
      });
      $('#test2').live('pagebeforeshow', function() {
          console.log("=== pagebeforeshow for #test2");
      });
    </script>
  </head>

  <body>
    <div data-role="page" id="test1">

      <div data-role="header" align="center">
        <p>Page 1.</p>
      </div><!-- /header -->

      <div data-role="content">
        <p><a href="#test2">Go to page 2.</a></p>
      </div><!-- /content -->

    </div><!-- /page -->

    <div data-role="page" id="test2">

      <div data-role="header" align="center">
        <a href="/" data-icon="back" data-rel="back">Back</a>
        <p>Page 2.</p>
        <a href="data-rel-back.html" data-icon="back">Go directly to page 1</a>
      </div><!-- /header -->

      <div data-role="content">
        <p>
        Try the two buttons and have a look at the console.<br>
        Using the left button (data-rel="back") triggers "too many" events.<br>
        The right button does what I'd expect.
        </p>
      </div><!-- /content -->

    </div><!-- /page -->
  </body>
</html>

Ответы [ 3 ]

1 голос
/ 20 октября 2011

Live Пример

Исправлены теги в атрибутах заголовка и кнопки возврата 

<a data-rel="back">Back</a>

jQM добавляет дополнительную разметку при отображении страницы, если вы используете неправильные теги, некоторые функции могут измениться, сломаться. Я думаю, что происходило с кнопкой «Назад», вы также добавили атрибут href = "/", и это могло привести к тому, что jQM попытается перейти к нему и вернуться к последней странице, вызывающей проблему.

Также в заголовке вы использовали тег <p> и выровняли его по центру, jQM делает это при использовании <h1>

Подробнее о кнопке «Назад» вы всегда можете обратиться к документам

1 голос
/ 20 октября 2011

Пожалуйста, измените ссылку для перенаправления на страницу 1 

<a href="data-rel-back.html" data-icon="back">Go directly to page 1</a>

должно быть 

<a href="/#test1" data-icon="back">Go directly to page 1</a>

если вы обнаружите какие-либо проблемы с этим, удалите косую черту 

 <a href="#test1" data-icon="back">Go directly to page 1</a>
0 голосов
/ 20 октября 2011

Оказывается, это ошибка в консоли Chrome.

Хром bugtracker

...