页面重新加载后在复选框列表中移动复选框 - Firefox only

每当我将复选框放入列表（ol，ul，dl）中，然后在列表上方动态插入按钮时，我在Firefox中会遇到一些奇怪的行为。如果我开始用一些简单的列表是这样的：页面重新加载后在复选框列表中移动复选框 - Firefox only

<dl class="c"> 
    <dt><label for="a1"><input type="checkbox" id="a1" />one</label></dt> 
    <dt><label for="a2"><input type="checkbox" id="a2" />two</label></dt> 
    <dt><label for="a3"><input type="checkbox" id="a3" />three</label></dt> 
</dl>

，并添加一些jQuery的是这样的：

$(document).ready(function(){ 
    var a = $('<button type="button">a</button>'); 
    var b = $('<button type="button">b</button>'); 
    $('<div/>').append(a).append(b).insertBefore($('.c')); 
});

...然后在Firefox中打开它，它看起来不错，在第一。 但检查第一个复选框，重新加载页面，并且复选标记跳转到第二个框。重新加载，然后跳到第三个。再次重新加载，并且没有复选框被选中。

如果我通过删除其中一个附加调用而忽略其中一个按钮，那很好。如果我将按钮更改为div或类似的东西，那很好。如果我用div替换dl标签（并去除dt标签），那就没问题。但我需要两个按钮，并且复选框必须位于我正在尝试构建的列表中。

有谁知道是什么原因造成的？

来源

2010-02-09 DaveS

甚至还有怪物，我加载你的HTML，然后选中框1，然后运行你的js两次。当我刷新时，检查框是框3.我认为你已经发现自己的错误。 – 2010-02-09 21:54:29

有趣的行为。我的猜测是，这是Firefox的“记忆表单字段值”机制出错 - 如何以及为什么，但我不知道。

该问题当然也可能是由您向我们显示的代码之外的内容引起的。你是否100％肯定没有棘手的JQuery例程，其他插件或任何东西？

这个问题当然值得更多的研究，但同时，请试试.reset()是否有帮助。它应该将所有的表单值返回到它们的预定义状态（=未选中）。

来源

2010-02-09 21:47:50

当然！ Firefox会记住缓存页面的表单状态和JavaScript状态。感谢你的想法。如果我在onunload事件或Firefox自己的pageHide事件（如果我仍然希望页面缓存）上调用它，则使用重置事件可用于我的目的。更多信息请访问：https：//developer.mozilla.org/en/Using_Firefox_1.5_caching。其他浏览器不同地记住状态...虽然通过增加上述示例的复杂性，我能够从IE中获得一些不同的奇怪行为。我还没有发现类似Chrome的行为。 – DaveS 2010-02-09 22:11:40

更新：使用$('input[type=checkbox]').attr("autocomplete", "off");禁用Firefox的缓存复选框的值。（我仍然无法绕过索引假设的缓存）。

我也尝试

$('.c').before($('<div/>').append(a).append(b));

具有相同的结果。看来Firefox会记住哪个盒子是根据它的索引进行检查的，所以当你刷新它的跳跃时，因为复选框之前的div还没有被创建。但这显然是一种猜测，因为无论如何，按钮在复选框之前都是两个元素。

来源

2010-02-09 22:09:14

首先，删除脚本会导致预期的行为;然而，给人的复选框唯一的名称更改描述/问题行为到这不是那么有问题的：

<dt><label for="a1"><input type="checkbox" id="a1" name="c1"/>one</label></dt> 
<dt><label for="a2"><input type="checkbox" id="a2" name="c2"/>two</label></dt> 
<dt><label for="a3"><input type="checkbox" id="a3" name="c3"/>three</label></dt>

如果检查框，然后重新加载页面，支票完全清除。

将insertBefore更改为insertAfter修复了原始问题，并导致复选框选择行为通常是在页面刷新后执行的。我现在正在深入研究这个问题。

来源

2010-02-09 22:09:21

有趣的是insertAfter工作，但insertBefore不工作。 +1找到。一个jQuery的错误？ – DaveS 2010-02-09 22:15:59

它看起来像一个DOM/Firefox问题。即使您在'

'列表之前的标记中有div，并使用vanilla DOM方法来插入按钮，问题仍然会发生。 – 2010-02-10 01:18:23

@DaveS请接受此为正确答案 – shishirmk 2013-04-26 01:27:32

尝试：

<form autocomplete="off">

来源

2010-05-28 21:25:18 Tim

我把你的解决方案，但呃..我讨厌包括自定义标记只是为了防止愚蠢的行为https://developer.mozilla.org/en/how_to_turn_off_form_autocompletion – rmontagud 2010-07-09 11:34:34

简单地包裹在一个表单元素列表。 Firefox可以正确使用复选框。

此致敬礼。

来源

2011-04-29 08:54:04 Marco

对不起，不起作用。 – DaveS 2011-05-05 18:08:13

页面重新加载后在复选框列表中移动复选框 - Firefox only

回答

相关问题