При изменении страницы в jQuery Mobile никакие обработчики событий не вызываются на второй странице.

Question

Я использую jQuery Mobile в своем приложении. У меня есть и страница index.html, и я пытаюсь добавить другую страницу в свое приложение. Итак, на странице index.html у меня есть ссылка на страницу Camera.html:

<a href="Camera.html">Take a photo</a>   // A. version

Когда я нажимаю на ссылку, страница камеры перемещается (она перенаправляется на страницу Camera.html с анимацией пролистывания), но ни один из обработчиков событий не вызывается на странице камеры (load, DOMContentLoaded и т. Д.). Я думаю, что jQuery Mobile использует ajax для перенаправления на другие страницы, и поэтому обработчики событий не вызываются.

Если я изменю это на следующее, события будут вызваны, но перенаправление страницы не будет анимированным:

<a href="Camera.html" data-ajax="false">Take a photo</a>   // B. version

Я хотел бы сохранить анимацию, и я также предпочитаю, чтобы на странице "Камера" вызывалось какое-то событие (я хотел бы использовать его для инициализации). Итак, у меня есть следующие вопросы.

1. Знаете ли вы хотя бы одно событие, которое будет вызвано, если я буду использовать версию A. для перенаправления на другую страницу?
2. Если я использую версию А., могу ли я как-то вызвать какое-либо событие на другой странице вручную?
3. Должен ли я перенаправить на другую страницу другим способом?

Не могли бы вы дать мне несколько примеров кода, пожалуйста?

Answer 1

Я хотел бы сохранить анимацию, и я также предпочитаю, чтобы на странице "Камера" вызывалось какое-то событие (я хотел бы использовать его для инициализации). Поэтому у меня есть следующие вопросы.

Попробуйте использовать это для инициализации вашей страницы с помощью pageinit или pageshow

jQuery('[data-role="page"]').live('pageinit', function(){
  /* page initialization */
})

pageinit запускается один раз - когда страница создается в DOM, а pagehow запускается каждый раз, когда отображается страница

Answer 2

Пожалуйста, уточните, когда вы имеете в виду, что это происходит, вы анимируете тег div на экране?

Если страница перенаправляется в Camera.html, то, если вы включите свои скрипты в тег скрипта в Camera.html, они будут выполняться только при загрузке Camera.html.

Дополнительно попробуйте:

• Если вы анимируете тег div, используйте событие $('div'). Load()

• Попробуйте добавить

  $('body id="camerabody"').load(function(){ alert("Body Loaded"); })
  

где camerabody - это идентификатор тега body в вашем файле Camera.html.

• Если вы вызываете анимацию с помощью jquery.animate, вы можете указать обратный вызов, когда анимация завершится

  $('div').animate(
           {height:'+=50'},
           1000,
           function(){ alert("animation complete"); 
  });