jquery - 结合 jQuery Mobile、jQuery UI 和 data-role=flipswitch 时出现明显错误。怎么修？

Question

我已将我的问题简化为：

<div id='outer'>
   <div id='inner'>
        <label for='flipInput'> Active: </label>
        <input name='flipInput' data-role='flipswitch' />
    </div>
</div>

除了包括这些库之外，这个脚本指令：

$('#inner').remove();

https://jsfiddle.net/Lenoxus/f1oo4LqL/

效果是解开那个“内部”div，而不是像我想要/期望的那样将它连同它的孩子一起移除。如果输入没有我真的想保留的 data-role='flipswitch'，它就不会发生。（换句话说，拥有该数据角色会导致标签和输入在删除过程中幸存下来，这是他们不应该的。）我正在疯狂地试图弄清楚如何抵消这一点。

Answer 1

我建议取出你需要的元素label，input销毁创建的元素flipswitch，删除div元素，重新添加元素，然后再次对其进行初始化flipswitch。

工作示例：https ://jsfiddle.net/Twisty/2trwL715/

jQuery

$(function() {
  var label = $("#inner label");
  var flip = $("#inner input[data-role='flipswitch']").clone();
  var parent = $("#inner").parent();
  $("#inner input[data-role='flipswitch']").flipswitch( "destroy" );
  $("#inner").remove();
  parent.append(flip);
  flip.flipswitch();
});