PJAX and Firefox back button issue

问题

I'm testing jquery.pjax.js and noticed a problem.
In my minimum test project, strange behavior like below happens:

Access to index.php in fireflx
Click a pjax link: location bar and page contents are changed
Click Firefox's back button: location bar is changed but contents remain

This behavior doesn't happen in GoogleChrome.
I want to know how to solve this.

My test project is:
http://karasunouta.com/php_test/pjax/
http://karasunouta.com/files/pjax.zip

index.php

<?php
    $page = 1;
    if (isset($_GET['page'])) {
        $page = $_GET['page'];
    }

    $isPjax = false;
    if (!empty($_SERVER['HTTP_X_PJAX'])) {
        $isPjax = true;
    }

    if (!$isPjax):
?>
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>page<?php echo $page; ?></title>
            <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
            <script type="text/javascript" src="js/jquery.pjax.js"></script>
            <script type="text/javascript">
                $(function(){
                    // link
                    $(document).pjax('a.pjax', '#main');

                    // form
                    $(document).on('submit', 'form', function(event) {
                        $.pjax.submit(event, '#main')
                    })
                });
            </script>
        </head>
        <body>
            <h1>pjax test</h1>
            <ul class="links">
                <li><a href="?page=1" class="pjax">page1</a></li>
                <li><a href="?page=2" class="pjax">page2</a></li>
                <li><a href="?page=3" class="pjax">page3</a></li>
            </ul>
            <form>
                Page：<input name="page" type="text" value="1">
                <input type="submit">
            </form>
            <div id="main" style="border: 3px double gray">
<?php endif; ?>
                <?php include("page/{$page}.html") ?>
<?php if (!$isPjax): ?>
            </div>
        </body>
    </html>
<?php endif; ?>

page/1.html

page1 contents

page/2.html

page2 contents

page/3.html

page3 contents

js/jquery-1.9.1.min.js
js/jquery.pjax.js

回答1:

I could have found a solution by myself...

before:

$(function(){
    // apply pjax
});

after:

$(document).ready(function() {
    // apply pjax
});

Now firefox back button looks working fine.
I'm not sure about reason why.
Actual behaviors of them looks different though several texts says the two writing form meanings are exactly same...

来源：https://stackoverflow.com/questions/15597625/pjax-and-firefox-back-button-issue

标签

php

javascript

jquery

ajax

pjax