Javascript jQuery flipswitch导致主干视图重新加载

我已经为jQuery Mobile苦苦挣扎了好几天……jQuery是一件很好的事情，但是jQM有太多奇怪的东西，对于简单的应用程序来说非常好，但是很难定制

当前的问题是如何禁用jQM的flipswitch的锚行为。我的应用程序在内存中存储了大量数据，所以我不想在每个页面上重新加载它们。我有一个基本视图，通过切换基本视图中的子视图来切换页面

下面是我遇到问题的子视图：

<div data-role="main" class="option-main ui-content">
<ul data-role="listview" data-inset="true" id="option-list">
    <li>
        <h1>Options</h1>
    </li>
    <li><a href="#">My Account</a></li>
    <li><div class="ui-field-contain"><label for="Map-Mode">Play on Map</label><input type="checkbox" id="Map-Mode" data-role="flipswitch"></div></li>
    <li><div class="ui-field-contain"><label for="Battle-Request">Receive Battle Request</label><input type="checkbox" id="Battle-Request" data-role="flipswitch"></div></li>
    <li><div class="ui-field-contain"><label for="Always-Accept">Always Accept Battle Request</label><input type="checkbox" id="Always-Accept" data-role="flipswitch"></div></li>
    <li><div class="ui-field-contain"><label for="Vibration">Vibration</label><input type="checkbox" id="Vibration" data-role="flipswitch"></div></li>
    <li><div class="ui-field-contain"><label for="slider-1">Volume</label><input type="range" name="slider-1" id="slider-1" value="50" min="0" max="100"></div></li>
</ul>

但它不起作用

问题肯定在标签上。如果我将其更改为in DevTool，则一切正常。但是，在运行时生成，因此我无法在我的端对其进行更改

为什么他们会在这样的地方使用标签！？关闭状态由一个包装，为什么他们使用一个作为打开状态

有没有办法禁用的行为？我完全可以复制生成的HTML并替换输入，然后将更改为…但是使用jQM有什么意义呢？也许我应该切换到Bootstrap3

已编辑：*已解决：*

停止了的行为，但没有完全解决问题。这将取消flipswitch上的默认单击效果

尝试了@dave的解决方案

$(".option-main ul li input[type=checkbox]").each(function(){
            $(this).flipswitch({
                create: function( event, ui ) { 
                    $('.ui-flipswitch-on').each(function() { 
                        $(this).replaceWith('<span class="' + 
                            $(this).attr('class') + 
                            '">' + 
                            $(this).html() + 
                        '</span>'); 

                    });

                }
            }, {defaults: true});
        });

现在所有的a标签都取消了，一切正常。Flipswitch是动态初始化的。在这些之后，我还调用了$.parent-selector.create来强制翻转开关触发create方法。最后一步不是必需的，这取决于flipswitch是否正确渲染。

问题可能是a标记是在运行时生成的。机会是，你的功能

$("a").on("click", function(e){
  e.preventDefault();
}).attr("href", null);

正在生成标记之前运行，因此事件处理程序不会绑定到该元素。您可以尝试使用事件委派：

 $("body").on("click", "a", function(e){
   e.preventDefault();
   return false;
 });

如果这不起作用，在研究它之后，我实际上会首先尝试这样做，使用flipswitch的JQM事件来完成：

$( ".selector" ).flipswitch({
  create: function( event, ui ) { 
      $('.ui-flipswitch-on').on("click", function(e){
          e.preventDefault();
      })
  }
});

尽管如此，我相信JQM无论如何都能做到这一点——当您在他们的示例中单击它时，url中的任何内容都不会改变。。。因此，这很可能是代码中的某个地方出现的问题。您可能需要简单地将a元素替换为其他元素。这似乎有效：

$( ".selector" ).flipswitch({
  create: function( event, ui ) { 
    $('.ui-flipswitch-on').each(function() { 
       $(this).replaceWith('<div class="' + 
                          $(this).attr('class') + 
                          '">' + 
                          $(this).html() + 
                          '</div>'); 
    });
  }
}); 

---

使用pre-rendering标记选项将允许您覆盖JQM创建标记的行为

例如，html中的第一个flipswitch输入标记如下所示：

<input type="checkbox" id="Map-Mode" data-role="flipswitch">

在浏览器中呈现页面并使用生成的html。将标记转换为，并向标记添加data enhanced=true属性

<div class="ui-flipswitch ui-shadow-inset ui-bar-inherit ui-corner-all">
  <span class="ui-flipswitch-on ui-btn ui-shadow ui-btn-inherit">On</span>
  <span class="ui-flipswitch-off">Off</span>
  <input id="Map-Mode" class="ui-flipswitch-input" type="checkbox" data-role="flipswitch" data-enhanced="true" tabindex="-1">
</div>

---

作为补充说明，除非你想把黑莓作为目标，否则我看不出有什么理由在有这么多新的轻量级框架的情况下使用jqm。F7、棘轮等@Roman谢谢你的留言。是的，我刚接触移动框架，所以我选择了一个比较有名的。我将尝试一种轻量级框架。JQM有它的局限性。谢谢！我已经包括了你对解决方案的答案。

<input type="checkbox" id="Map-Mode" data-role="flipswitch">

<div class="ui-flipswitch ui-shadow-inset ui-bar-inherit ui-corner-all">
  <span class="ui-flipswitch-on ui-btn ui-shadow ui-btn-inherit">On</span>
  <span class="ui-flipswitch-off">Off</span>
  <input id="Map-Mode" class="ui-flipswitch-input" type="checkbox" data-role="flipswitch" data-enhanced="true" tabindex="-1">
</div>