Question

每当我在列表（ol，ul，dl）中放入复选框，然后在列表上方动态插入按钮时，我就会在Firefox中遇到一些奇怪的行为。如果我从一个像这样的简单列表开始：

<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标签），那很好。但我需要两个按钮，并且复选框必须在我正在尝试构建的列表中。

有人知道造成这种情况的原因吗？

Answer 1

首先，删除脚本会导致预期的行为;但是，给复选框添加唯一名称会将描述/问题行为更改为不会出现问题的地方：

<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会修复原始问题并导致复选框选择操作，这通常是在页面刷新后执行的操作。我现在正在深入研究这个问题。

Answer 2

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

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

这个问题当然值得进行更多研究，但与此同时，尝试.reset()表格是否有帮助。它应该将所有表单值恢复到预定义状态（=未选中）。

Answer 3

尝试：

<form autocomplete="off">

Answer 4

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

我也试过

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

具有相同的结果。似乎firefox会记住哪个盒子是根据它的索引来检查的，所以当你刷新它的跳跃时，因为复选框之前的div还没有。但这显然是猜测，因为按钮在复选框之前实际上是两个元素。

Answer 5

只需将列表包装在表单元素中即可。 Firefox可以使用复选框正常工作。

最好的问候。

在页面重新加载后在复选框列表中移动复选标记 - 仅限Firefox

5 个答案: