动态添加可折叠设置时破坏 JQM ControlGroup答案

【问题标题】：Breaking JQM ControlGroup when dynamically adding collapsible to set动态添加可折叠设置时破坏 JQM ControlGroup
【发布时间】：2016-01-19 04:27:47
【问题描述】：

我正在使用 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/

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

“未捕获的错误：无法在初始化之前调用控制组上的方法；尝试调用方法‘刷新’”

【问题讨论】：

标签： javascript jquery html jquery-mobile

【解决方案1】：

不是刷新collapsibleset，而是告诉jQM去enhanceWithin()：

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

更新FIDDLE

【讨论】：

谢谢，这正是我想要的。我假设如果我将它附加到一个按钮上它会工作多次？
@PolishVendetta，是的，请参阅更新的小提琴：jsfiddle.net/ezanker/v2uc64yk/2
据我所知，你是怎么知道使用 .enhanceWithin() 而不是 .collapsibleset('refresh')
@PolishVendetta:api.jquerymobile.com/enhanceWithinenhancedWithin 增强所有子元素，而 refresh 用于调用它的小部件。