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

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