How do I use $('document').bind('pageinit') properly in jQuery Mobile?

Question

So I understand that jQuery Mobile uses $('document').bind('pageinit') instead of $(document).ready() because they use Ajax. see here But I'm having trouble getting it to work. For instance, I got this:

$(document).ready(function() {
$('.scrollingtext').bind('marquee', function() {
var ob = $(this);
var tw = ob.width();
var ww = ob.parent().width();
ob.css({ right: -tw });
ob.animate({ right: ww }, 10000, 'linear', function() {
ob.trigger('marquee');
});
}).trigger('marquee');

});

which works fine, but than I change it to this:

$('document').bind('pageinit', function(){
    $('.scrollingtext').bind('marquee', function() {
    var ob = $(this);
    var tw = ob.width();
    var ww = ob.parent().width();
    ob.css({ right: -tw });
    ob.animate({ right: ww }, 10000, 'linear', function() {
    ob.trigger('marquee');
    });
    }).trigger('marquee');

    });

And its a dud. How do I do this correctly?

Answer 1

documentshould not be between quotes. Additionally, it should be applied to pages (div with a data-role="page" property).

$(document).on('pageinit','[data-role=page]', function() {

You can see an example here