Question

我使用HTML5 <template>标记来定义要添加到可折叠集的可折叠项。该定义包含一个按钮控制组，在添加时会被拆开。

HTML
  <template id="template">
    <div data-role='collapsible' data-collapsed='false' data-collapsed-icon='carat-d' data-expanded-icon='carat-u' id='pListItem'>
      <h3 id='pDesc'>Item 2</h3>
      <div class='w3-row'>
        <div class='w3-col s5 m5 l5'>
          <img id='pImg' src='https://upload.wikimedia.org/wikipedia/commons/7/77/Army_Combat_Boot_(Hot).jpg' style='max-width:100%;max-height:150px;'>
        </div>
        <div class='w3-col s7 m7 l7'>
          <div style='text-align:right'>
            <p id='pNowPrice' style='font-size:24px;margin:5px 0px;'>$199.99</p>
            <p id='pWasPrice' style='font-size:12px;margin:0px 0px;'>$299.99</p>
          </div>
        </div>
        <div class='w3-col s7 m7 l7'>
          <div style='font-size:12px;text-align:right;'>
            <p id='pUPC'>UPC: 999999999999</p>

            <div data-role="controlgroup" data-type="horizontal" id="buttonGroup2">
              <a href="#" id="pAddButton" class="ui-btn ui-corner-all ui-icon-shop ui-btn-icon-left">Add</a>
              <a href="#" class="ui-btn ui-corner-all ui-icon-bullets ui-btn-icon-right">Info</a>
            </div>

          </div>
        </div>
      </div>
    </div>
  </template>

JS
$(document).on('pageshow', function() {
  var content = document.querySelector('#template').content;
  document.querySelector('#container').appendChild(document.importNode(content, true));
  $('#container').collapsibleset('refresh');
});

我已经创建了一个jsfiddle来说明问题。第1项以HTML格式定义并正确显示。使用模板添加项目2并显示损坏的控制组。 https://jsfiddle.net/PolishVendetta/v2uc64yk/

添加控制组刷新会引发错误

＆＃34;未捕获错误：在初始化之前无法调用控制组上的方法;试图调用方法＆＃39;刷新＆＃39;＆＃34;

Answer 1

不要刷新collapsibleset，而是告诉jQM使用enhanceWithin（）：

$('#container').enhanceWithin();

更新了 FIDDLE

在动态添加可折叠设置时打破JQM ControlGroup

1 个答案: