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

但似乎没有效果。我已经测试过，在调用时看看他的变量是否正确，并且没有问题，正确的变量正在传递。

Answer 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>

我希望这会有所帮助。

jQuery Mobile Dialogs内容不变

1 个答案: