1

I can't get this to load on consecutive pages:

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

I recently read JQuery Mobile .page() function causes infinite loop? but I'm not sure where documentation is for .mobile or .page.

Community
  • 1
  • 1
daily-learner
  • 617
  • 1
  • 8
  • 17
  • could not get the following to work on pages after the initial . i'm using a next|previous feature (pagination) and the following only occurs on the initial page. tried pagecreate but did not work – daily-learner Dec 02 '11 at 23:36
  • In your comment you are nesting two event handlers deep (and you haven't quite hit the right event). You only need one, check-out my answer below. Also, `$(document).ready()` is not the same as binding to the `pagecreate` event for a pseudo-page in jQuery Mobile. – Jasper Dec 03 '11 at 01:06

1 Answers1

1

You are binding to the window.load event which only fires on the initial page load. In jQuery Mobile, each time you navigate to another page it is brought into the DOM via AJAX, so no full-page-refresh occurs. That is why you need to bind to a page-event using .delegate(). page-events are triggered on the specific data-role="page" elements that it relates to. For example, if you have a page with an id of some_id you can bind to the pagecreate event for that page by doing this:

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

If you want to bind an event to all pseudo-pages in your site then this selector will work:

$(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);
    })
});

This block of code does not need to be placed in a document.ready or window.load event handler, it can just be included globally.

Check-out this documentation on jQuery Mobile events: http://jquerymobile.com/demos/1.0/docs/api/events.html

To learn more about $.mobile check-out this page and the different functions you can use: http://jquerymobile.com/demos/1.0/docs/api/methods.html

.page() has beed depreciated in favor of trigger('create'). This is how you initialize any jQuery Mobile widget.

Jasper
  • 75,717
  • 14
  • 151
  • 146
  • thank you jasper. especially for where that documentation is ;-) – daily-learner Dec 07 '11 at 18:04
  • @RafaelDaCosta You're welcome, I noticed you haven't selected any accepted answers to your questions, you may want to check-out: http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work/5235#5235 – Jasper Dec 07 '11 at 18:15
  • @RafaelDaCosta The fix appears to be working on my end, the `tall` class is added to the `tea-obreht-tigers-wife-by-beowulf-sheehan.jpg` image. What else isn't working? Btw, you mobile site is returning five 404 errors for some CSS style-sheets that are not in the `mobile/css/` directory. – Jasper Dec 07 '11 at 18:48
  • i tried to vote up but got this message 'Vote Up requires 15 reputation' ;-( you were very helpful – daily-learner Dec 07 '11 at 18:51