I'm getting some strange behavior in Firefox whenever I put checkboxes inside a list (ol, ul, dl), and then dynamically insert buttons above the list. If I start with a something simple list like this:
<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>
and add some jQuery like this:
$(document).ready(function(){
var a = $('<button type="button">a</button>');
var b = $('<button type="button">b</button>');
$('<div/>').append(a).append(b).insertBefore($('.c'));
});
...then open it in Firefox, it looks fine at first. But check the first checkbox, reload the page, and the check-mark jumps to the second box. Reload again, and it jumps to the third. Reload yet again, and no checkboxes are left checked.
If I leave out one of the buttons by dropping one of the append calls, it's fine. If I change the buttons to divs or something similar, it's fine. If I replace the dl tag with a div (and get rid of the dt tags), it's fine. But I need both buttons, and the checkboxes have to be in a list for what I'm trying to build.
Does anybody know what's causing this?
