2012-02-02 1 views
2

Я разработал динамический веб-сайт для местной газеты в Греции, и у меня есть следующее странное поведение в своем мобильном издании (jquery mobile) :JQuery Мобильное странное поведение, событие onchange события возвращается все время (только на SAFARI IPHONE)

  1. у меня есть выбор на верхней части каждой страницы с категориями (справа вверху), и когда я выбираю оттуда какой-либо категории, я ловлю OnChange событие и принять значение параметра, который содержит URL-адрес назначения , Страница изменилась, но сразу возвращается к исходной странице.

  2. У меня есть на странице вид списка с теми же адресами, что и верхний выбор (категории), и если я нажму на эти ссылки (из списка), все будет хорошо.

3. Такое поведение только может быть воспроизведена в любом браузере IPhone SAFARI.

Я прочитал несколько ответов более или менее с той же проблемой, но любое обходное решение сработало для меня. адрес мобильной версии: http://m.stagonnews.gr

Спасибо.

+0

Используете ли вы на OnChange событие, запущенному с помощью выбора следующего метода? $ .mobile.changePage ("your_url_page.html"); – aki

+0

Код следующий: $ (document) .ready (function() { $ ("select [name = select-choice-a]"). Change (function (event) { $ .mobile.changePage ('#' + this.options [this.selectedIndex] .value); }); }); Я также попытался: $ .mobile.changePage (this.options [this.selectedIndex] .value); и window.location.hash = this.options [this.selectedIndex] .value; – pabloingreece

ответ

1

Не используйте функцию $ (document) .ready()!

jQuery Мобильные документы предлагают документацию об этом! Он срабатывает каждый раз, когда вы меняете страницу, и, поскольку всплывающее диалоговое окно не записывается в историю, оно может перенаправить вас в него, возможно. Doc here

Используйте живую инициализационный на своем поле выбора, похожее на это:

//on all pages you have a div with data-role="header" | assign an id to it 
    //if this doesn't work, assign the live eventto your page id, not header id 
$('#your_header_id').live('pageshow',function (event) { //or 'pagecreate' 
     //load function and fire the changing event when user changes the select 
    $('select[name=select-choice-a]').change(function(event){ 
     //make sure it returns the exact value of select 
     //if not, there is a problem in your select value method 
     console.log('Change to page: #' + this.options[this.selectedIndex].value); 

     //to the change page method that changes the page 
     //you could also do the $.mobile.loadPage method to insert it into DOM before change 
     $.mobile.changePage('#' + this.options[this.selectedIndex].value,{changeHash: false}) 
    }) 
}); 

Мое мнение об использовании анкеров (# ELEMENT_ID'S) в мобильное приложение, разработанное с JQuery Mobile это: DONT !, но Это только мое мнение! Я использую определенные файлы HTML и указываю ссылку на них! Чтобы передать параметр на другую страницу и получить его, я использую определенную функцию, которая возвращает мне сам параметр и делает с ним классный приятный материал. Я отправил по другому вопросу here, что это за функция и как ее можно использовать. Затем я меняю страницы только с помощью $ .mobile.changePage ('myPage.html? Id =' + variable).

Я использую этот метод, потому что я могу очень хорошо структурировать свое приложение с ограниченными данными, и я могу контролировать все мои html-файлы одним файлом javascript с событиями .live.

Короткий краток:

index.html <- load all javascripts/css/whatever here 
other_file.html <- declare only <html><head></head><body> jQM specific div's here (like <div data-role"page"></div> etc,)</body></html> 
+0

Большое спасибо aki. Но все еще есть проблемы: Перейдите на страницу: #/el/current/greece/(это нормально!), Но после этого при попытке changePage я получаю это одно и то же поведение STRANGE: возвращается на страницу вызывающего абонента !!! Я также пробовал без # и то же самое произошло.Попробуйте, пожалуйста, страницу: http://m.stagonnews.gr и нажмите вверху справа на любой опции (например, попробуйте 3-й или 4-й). – pabloingreece

+0

Ну, новый подход, похоже, работает сейчас. Я тестировал на своем iPhone и без ошибок. – aki

+0

Спасибо, @aki. $ .mobile.changePage() решил аналогичные проблемы для меня с отображением диалога на Android! – Roman

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

  • Нет связанных вопросов^_^