Question

我已经在jQuery Mobile上苦苦挣扎了好几天... jQuery是一件好事，但是jQM有很多古怪的东西，对于简单的应用程序很有用，但很难定制......

目前的问题是如何禁用jQM的flipswitch主播的行为。我的应用程序将大量数据存储在内存中，因此我不想在每个页面上重新加载它们。我有基本视图并切换＆＃34;页面＆＃34;通过在基本视图中切换子视图。

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

<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>

在jQM下，<data-role="flipswitch">属性将该输入转换为flipswitch。问题是flipswitch被<a>标记包装为jQM默认值。每次我点击开关时，都会触发<a>标记并重新加载视图。我尝试了以下方法来禁用标记：

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

但它不起作用。

问题肯定出在<a>标签上。如果我在DevTool中将其更改为<span>，一切正常。但是<a>是在运行时生成的，所以我不能在我的最后改变它。

为什么他们会在这样的地方使用<a>标签！？＆＃34;关闭＆＃34;状态由<span>包裹，为什么他们使用<a>进行＆＃34;＆＃34;状态？

有没有办法禁用<a>的行为？我绝对可以复制生成的HTML并替换我的输入，然后将<a>更改为<span> ...但是那么使用jQM是什么意思？也许我应该切换到Bootstrap 3 ...

已编辑： * 已解决： *

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

停止了<a>的行为，但没有完全解决问题。这将取消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});
        });

现在所有标签都被取消，一切正常。 Flipswitch动态初始化。在这之后我还调用$(".parent-selector").create()来强制翻转开关触发＆＃34;创建＆＃34;方法。最后一步不是必需的，取决于你的flipswitch是否正确呈现。

Answer 1

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

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

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

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

如果这不起作用，并且在查看之后我会首先尝试这种方式，使用JQM的flipswitch事件来执行此操作：

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

所有这一切，我相信JQM无论如何都会这样做 - 当你在他们的例子中点击它时，网址中的任何内容都不会改变......所以它很可能是你代码中某处的问题。您可能只需要用其他东西替换a元素。这似乎有效：

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

Answer 2

使用预渲染标记选项将允许您覆盖JQM创建标记的行为。

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

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

在浏览器中渲染页面并使用生成的html。将标签转换为并添加data-enhanced =＆＃34; true＆＃34;属性为标记。

<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>

jQuery flipswitch导致Backbone视图重新加载

2 个答案: