【jQuery】Ajaxで画面書き換え後、ブラウザバックで書き換え前の画面を表示したい

Question

前提・実現したいこと

Ajaxで画面書き換え後、ブラウザバックで書き換え前の画面を表示したい。

①【aaa.html】 → 【bbb.html】 という経路で 【bbb.html】を表示する
② Ajaxで【bbb.html】内の画面を書き換える
③ 書き換え後のページからブラウザバックを行う
④ 書き換え前の状態である【bbb.html】を表示したい

このとき、Ajaxで画面書き換え時にURLを変化させていないので【aaa.html】に戻ってしまいます。

該当のソースコード

<div class="ajaxResultContainer">
  <p>Ajax遷移前の表示</p>
  <div class="trigger" id="1">トリガー</div>
</div>

$(function(){
  $('.trigger').click(function(){

    $id = $(this).attr('id');

    $.ajax({
      url: php/result.php,
      post: post,
      data: {'id': $id}
    })
    .done(function(data) {
      $('.ajaxResultContainer').html(data);
    }
    .fail(function() {
      console.log('...');
    })

  })
})

試したこと

history に１つ履歴を挿入するため、jQueryのクリックイベント内に下記のプログラムを記述しました。

window.history.pushState(null, null, 'afterAjax');

これで【sample/bbb.html】→【sample/afterAjax】とURLを一噛みできるようになり、
ブラウザバックで【bbb.html】に戻ることはできるのですが、
表示はAjaxで書き換えた後のものになっています。

ここでリロードを行えば、Ajax書き換え前の状態になるのですが、
何か良い方法はありますでしょうか・・・。

補足情報（FW/ツールのバージョンなど）

Chromeでテストしていますが、最終的にはIE11でも同様の処理が行えるようにしたいです。
非常に基礎的な質問かもしれませんが、お力添えいただけますと幸いです。
よろしくお願いいたします。

Comments

[yambejp]

一連の動作が確認できるソースを表示ください
（なるべく簡潔にお願いします）

Answer 1

Ajax書き換え前の状態

書き換えず、元の表示をとっておいて非表示にし新しいコンテンツを表示すれば
ページバック時に元の方を表示すればいいでしょう
（それをする意味があるかどうかは微妙ですが）