结合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/

效果是UNWRAP"内部"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();
});