1

我有一个收据列表和一个对话框，单击收据时会打开一个包含详细信息的对话框：

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();
});

但似乎没有一个工作。我已经测试了他在调用时是否像收据号码这样的变量是正确的并且没有问题，正在传递正确的变量。

4

1 回答 1

1

替换函数内的以下行showReceipt：

$header = $page.children( ":jqmData(role=header)" ),
$content = $page.children( ":jqmData(role=content)" )

这些行：

$header = $page.find( "div:jqmData(role='header')" ),
$content = $page.find( "div:jqmData(role='content')" )

并且对话框的内容将正确更新。

.children()该问题可能与方法仅沿 DOM 树向下传递一层的事实有关。另一方面，.find()可以向下移动多个级别。

正如您在下面的 HTML 代码中看到的那样，div[data-role='content']div 不是页面的第一级子级div[id='receipt']。

<div data-role="dialog" id="receipt" data-url="receipt" tabindex="0" class="ui-page ui-body-c ui-dialog ui-overlay-a ui-page-active" style="min-height: 302px;">
  <div role="dialog" class="ui-dialog-contain ui-corner-all ui-overlay-shadow">
    <div data-role="header" class="ui-corner-top ui-header ui-bar-a" role="banner">
      <a data-iconpos="notext" data-icon="delete" href="#" class="ui-btn-left ui-btn ui-btn-up-a ui-shadow ui-btn-corner-all ui-btn-icon-notext" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="a" title="Close">
        <span class="ui-btn-inner ui-btn-corner-all">
          <span class="ui-btn-text">
            Close
          </span>
          <span class="ui-icon ui-icon-delete ui-icon-shadow">
            &nbsp;
          </span>
        </span>
      </a>
      <h1 class="ui-title" role="heading" aria-level="1">
        q0001
      </h1>
    </div>
    <div data-role="content" class="ui-corner-bottom ui-content ui-body-c" role="main">
      <p>
        Receipt Number: q0001
      </p>
      <ul data-role="listview" class="ui-listview">
        <li class="ui-li ui-li-static ui-btn-up-c">
          Item: Spaghetti x 3 Total: 150
        </li>
        <li class="ui-li ui-li-static ui-btn-up-c ui-li-last">
          Item: Olive Oil x 1 Total: 1300
        </li>
      </ul>
    </div>
  </div>
</div>

我希望这有帮助。

于 2013-09-11T20:26:57.783 回答