События страницы не инициируются при переходе между страницами в многостраничных HTML-файлах.

Я пытаюсь понять события jquery для мобильных страниц на многостраничной html-странице.

когда я пытаюсь перейти к window2 внутри index1.html, события страницы инициируются и происходит переход.

Однако, если я пытаюсь перейти от index1.html к index3.html, события страницы index3.html не запускаются, и происходит переход страницы.

Когда я попытался добавить data-ajax ="false" в index3.html href, события страницы page3.html запускаются. Однако перехода не происходит.

Может кто-нибудь, пожалуйста, помогите мне понять 1), почему события не запускаются? 2) проблемы с использованием data-ajax ="false"

Ниже приведены страницы, между которыми я пытаюсь перемещаться

index1.html:

<!DOCTYPE html> 
<html> 
<head> 
  <meta name=viewport content="user-scalable=no,width=device-width" />
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head> 
<body> 
<div data-role="page" id="home">
  <div data-role="header">
    <h1>Home</h1>
  </div>
  <div data-role="content">
    <p> Window content 1 </p>  
    <a href="#win2"> Window 2 (into the DOM) </a>
    <br /><br />

    <a href="index3.html" data-transition="pop" > 
          Window 3 in index3.html (data-dom-cache=false) </a>
    <br /><br />


    <br /><br />
  </div>
</div>
<div data-role="page" id="win2" data-add-back-btn="true">
  <div data-role="header">
    <h1>Window 2</h1>
  </div>

  <div data-role="content">
    <p> Window content 2 </p>
  </div>
</div>
</body>
</html>

    $(document).bind ("pagebeforeload", function (event, data)
{
  alert ("pagebeforeload data.url = " + data.url);
});

$(document).bind ("pageload", function (event, data)
{
  alert ("pageload data.url = ");
});

$(document).bind ("pageloadfailed", function (event, data)
{
  alert ("pageloadfailed data.url = " + data.url);
});


$("#home").on ("pagebeforecreate", function (event)
{
  alert ("pagebeforecreate id=" + this.id);
});

$("div:jqmData(role=page)").on ("pagecreate", function (event)
{
  alert ("pagecreate id=" + this.id);
});

$("div:jqmData(role=page)").on ("pageinit", function (event)
{
  alert ("pageinit id=" + this.id);
});


$("div:jqmData(role=page)").bind ("pagebeforeshow", function (event, ui)
{
  alert("pagebefore show");

});

$("div:jqmData(role=page)").bind ("pageshow", function (event, ui)
{
    alert("pageshow");

});

$("div:jqmData(role=page)").bind ("pagebeforehide", function (event, ui)
{
        alert("pagebeforehide");
});

$("div:jqmData(role=page)").bind ("pagehide", function (event, ui)
{
        alert("pagehide");
});



**index3.html**

<!DOCTYPE html> 
<html> 
<head> 
  <meta http-equiv=Content-Type content=text/html;charset=iso-8859-1 />
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head> 

<body> 

<div data-role="page" id="win3" data-add-back-btn="true">
  <div data-role="header">
    <h1>Window 3</h1>
  </div>

  <div data-role="content">
    <p> Window content 3 </p>
  </div>
</div>

</body>
</html>
<script>
$("div:jqmData(role=page)").bind ("pagebeforeshow", function (event, ui)
{
  alert("pagebefore show3");

});

$("div:jqmData(role=page)").bind ("pageshow", function (event, ui)
{
    alert("pageshow3");

});

$("div:jqmData(role=page)").bind ("pagebeforehide", function (event, ui)
{
        alert("pagebeforehide3");
});

$("div:jqmData(role=page)").bind ("pagehide", function (event, ui)
{
        alert("pagehide3");
});



</script>
Источник

2 ответа

Решение

Это называется одностраничная модель, а не многостраничная.

Поскольку JQM использует Ajax Navigation для переключения между страницами, при вызове внешней страницы, например, Index2.html, сначала загружается data-role=page на этой странице, и он игнорирует все другие теги.

Следовательно, чтобы решить первую проблему, вам нужно поместить JS-код этой страницы внутрь data-role=page чтобы загрузить на странице.

Когда вы используете data-ajax=false или же rel=externalвы запрещаете JQM загружать страницу через Ajac, и вместо этого она загружается через HTTP как свежая страница со всеми загруженными тегами. Вот почему Il Event работает.

Источник

Итак, простое объяснение.....

1) События, скорее всего, запускаются, а вы просто не видите результата. Это довольно часто, вы должны попробовать использовать разные события, чтобы убедиться, что вы используете правильное. Отправьте код через jsfiddle, и мы поможем вам отладить его.

2) Если вы отключите ajax для ссылки, вы фактически отключите переходы ajax и просто загрузите страницу так, как если бы к ней обращались напрямую. Если при такой загрузке страницы вы видите ожидаемые результаты, это доказывает, что события страницы запускаются.

Посмотрите здесь некоторые объяснения порядка, в котором происходят события;

http://jqmtricks.wordpress.com/2014/03/26/jquery-mobile-page-events/

Источник
Другие вопросы по тегам