初始化动态添加的JQuery Mobile rangelider

Question

我使用ajax动态加载html内容，并且很难创建或刷新内容中的JQuery Mobile rangelider。

HTML

 <div class="ui-grid-b ui-responsive">
  <div id="adv-search" data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" class="ui-mini">
    <h4>Advanced Search</h4>
    <div class="advanced-search">
     <!--content should get loaded here -->
    </div>
  </div>
</div>

我能正确显示它的最接近的是使用这一行：

$(document).on("collapsibleexpand", "#adv-search", function() {
    /*make ajax call and on success do this - */
    $(".advanced-search").html(content);
    $("#priceslider").rangeslider();
});

然后问题是它使两个范围输入看起来像翻转开关或迷你范围滑块而不是正确的文本框（就像它们应该看起来一样）。

这是JSFiddle，其中包含了我尝试过的所有内容以及我得到的结果。