jquery - jQuery Mobile ダイアログのコンテンツが変更されない

Question

領収書のリストと、領収書をクリックすると詳細が表示されるダイアログがあります。

function showReceipt( urlObj, options, receiptNumber) {
    var pageSelector = urlObj.hash.replace( /\?.*$/, ""),
        $page = $( pageSelector),
        $header = $page.children( ":jqmData(role=header)" ),
        $content = $page.children( ":jqmData(role=content)" ),
        markup='';
    markup += buildReceipt( receiptNumber, markup );
    $header.find( "h1").html( receiptNumber);
    $content.html( markup );
    $page.page();
    $content.find( ":jqmData(role=listview)" ).listview();
    options.dataUrl = urlObj.href;
}

htmlファイル

<div id="receipt" data-role="dialog">
  <div data-role="header"><h1></h1></div>
  <div data-role="content">
  </div>
</div>

最初の領収書をクリックすると正常に動作しますが、ダイアログを閉じて別の領収書をクリックすると、最初の領収書の詳細がポップアップ表示されます。私は次のようなさまざまなことを試しました：

$("#receipt").on("pagehide", function() {
    $("#receipt").jqmRemoveData(':jqmData(role=content)');
});

また

$("#receipt").on("pagehide", function() {
    $("#receipt").empty();
});

そしてさえ

$("#receipt").on("pagehide", function() {
    $("#receipt").remove();
});

しかし、どれも機能していないようです。呼び出し時にレシート番号などの変数が正しいかどうかをテストしましたが、問題はなく、正しい変数が渡されています。