.html（）不适用于jquery-mobile哈希导航

Question

我正在使用jQuery mobile进行测试。我的哈希导航问题。

当我直接访问我的应用程序（http://reev.nl/m/）时，它运行正常。但是当我导航到http://reev.nl/m/#/m/index.html（在某些手机上发生）时，.html（）似乎不起作用......

很奇怪，因为它的代码相同：

<script type="text/javascript">
    // The object
    var TwitterObj = {
        // Initialize
        init: function( options, elem ) {
            var self = this;

            // Log so I can see it's running
            console.log( 'init' );

            self.elem = elem;

            self.baseUrl = 'http://search.twitter.com/search.json';
            self.options = options;
            self.tweets = false;

            // Start load
            self.load();
        },

        // Fetch data from twitter
        fetch: function() {
            var self = this;

            // Log so I can see it's running
            console.log( 'fetch' );

            // Get tweets
            return $.ajax({
                url: self.baseUrl,
                data: {
                    q: self.options.query,
                    rpp: self.options.count,
                    lang: self.options.lang,
                    since_id: 0,
                    result_type: 'recent'
                },
                cache: false,
                dataType: 'jsonp'
            });
        },

        // Mapping
        mapping: function() {
            var self = this;

            // Log so I can see it's running
            console.log( 'mapping' );

            // Do some mapping
            self.tweets = $.map( self.tweets, function( obj, i ) {
                return '<li style="margin-bottom: 15px;"><span>'+ obj.created_at +'</span><br /><strong>'+ obj.from_user_name +':</strong> '+ obj.text +'</li>';
            }).join("\n");
        },

        // Add list
        display: function() {
            var self = this;

            // Log so I can see it's running
            console.log( 'display' );

            // load tweets in list
            self.elem.html( self.tweets ); //.listview( 'refresh' )
        },

        // Load tweets
        load: function() {
            var self = this;

            // Log so I can see it's running
            console.log( 'load' );

            // Show loading msg
            self.elem.html( '<li>loading...</li>' );

            // Get tweets
            self.fetch().done( function( data ) {
                self.tweets = data.results;

                // Map tweets and show them
                self.mapping();
                self.display();
            } );
        }
    }
</script>
<!-- Start of first page -->
<div data-role="page" id="twitter">

    <div data-role="header" data-position="fixed">
        <h1>Twitter</h1>
    </div>

    <div data-role="content">
        <p>
            <a href="contact.html">Bezoek ons</a>
        </p>
        <p>
            <ul id="TwitterList">
                <li>init</li>
            </ul>
        </p>
        <p>
            <a href="#" id="twReload">load</a>
        </p>
        <p>
            <a href="puppy.html">Boks</a>
        </p>
    </div>

    <div data-role="footer" data-position="fixed">
        <h4>&copy; Banaan</h4>
    </div>
</div>
<script type="text/javascript">
    var Twitter = Object.create( TwitterObj );
    var twElem = $('#TwitterList');
    var twOptions = {
        query: 'jQuery',
        count: 5,
        lang: 'en'
    };

    $(document).bind('pageinit', function(event, ui) {
        Twitter.init( twOptions, twElem );
    });

    $(document).live('pagebeforehide', function(event, ui) {
        var nextPage = 'twitter';

        if(ui.nextPage[0]) {
            nextPage = ui.nextPage[0].dataset.url
        }

        if( nextPage === 'twitter' ) {
            Twitter.load();
        }
    });

    $("#twReload").click(function() {
        Twitter.load();
    });
</script>