jquery mobile не загружает объекты?

Question

Я не могу загрузить это на последовательных страницах:

$(window).load(function(){
  $('.container').find('img').each(function(){
    var imgClass = (this.width/this.height > 1) ? 'wide' : 'tall';
    $(this).addClass(imgClass);
  })
})

Я недавно прочитал Функция JQuery Mobile .page () вызывает бесконечный цикл? , но я не уверен, где документация для .mobile или .page.

Answer 1

Вы привязываетесь к событию window.load, которое срабатывает только при начальной загрузке страницы.В jQuery Mobile каждый раз, когда вы переходите на другую страницу, она переносится в DOM через AJAX, поэтому полное обновление страницы не происходит.Вот почему вам нужно привязать к page-event, используя .delegate().page-events запускаются на определенных элементах data-role="page", к которым он относится.Например, если у вас есть страница с идентификатором some_id, вы можете выполнить привязку к событию pagecreate для этой страницы, выполнив следующие действия:

$(document).delegate('#some_id', 'pagecreate', function(){
    alert('Alright, it worked!');
});

Если вы хотите привязать событие ко всем псевдо-страниц на вашем сайте, тогда этот селектор будет работать:

$(document).delegate('[data-role="page"]', 'pagecreate', function(){
    var $page = $(this);
    $page.find('.container').find('img').each(function(){
        var $image = $(this),
            imgClass = ($image.width()/$image.height() > 1) ? 'wide' : 'tall';
        $image.addClass(imgClass);
    })
});

Этот блок кода не нужно помещать в обработчик событий document.ready или window.load, его можно просто включить глобально.

Ознакомьтесь с этой документацией о событиях jQuery Mobile: http://jquerymobile.com/demos/1.0/docs/api/events.html

Чтобы узнать больше о $.mobile, проверьте эту страницу и различные функции, которые вы можете использовать: http://jquerymobile.com/demos/1.0/docs/api/methods.html

.page() амортизируется в пользу trigger('create').Вот как вы инициализируете любой виджет jQuery Mobile.