jQuery Flipswitch 导致 Backbone 视图重新加载

Posted 2023-05-09

【中文标题】jQuery Flipswitch 导致 Backbone 视图重新加载

【英文标题】：jQuery flipswitch causing Backbone views reload

【发布时间】：2014-05-20 16:19:22

【问题描述】：

我已经在 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>

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

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

但它不起作用。

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

他们为什么要在这样的地方使用<a> 标签！？ “关闭”状态由<span> 包裹，为什么他们使用<a> 表示“开启”状态？

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

已编辑： *已解决：*

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

停止<a> 的行为，但并未完全解决问题。这将取消翻转开关上的默认点击效果。

尝试了@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() 来强制翻转开关触发“创建”方法。这最后一步不是必需的，取决于您的翻转开关是否正确呈现。

【问题讨论】：

附带说明，除非您想以黑莓为目标，否则当有这么多新的轻量级框架时，我认为没有理由使用 jqm。 F7、棘轮等

@Roman 感谢您的来信。是的，我是移动框架的新手，所以我选择了一个比较有名的框架。我会尝试一个轻量级的框架。 JQM 有其局限性。

【参考方案1】：

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

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

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

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

如果这不起作用，并且在研究之后我会首先尝试这种方式，请使用 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>'); 
    );
  
); 

【讨论】：

谢谢！我已将您对解决方案的答案包含在内。

【参考方案2】：

使用预呈现标记选项将允许您覆盖 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>