Question

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?

Answer 1

Interesting behaviour. My guess is that this is Firefox’s “memorize form field values” mechanism going awry – how and why, I don’t know, though.

The problem could of course also be caused by something outside the code you have shown us. Are you 100% sure there are no tricky JQuery routines, other plugins or anything?

The issue certainly merits more research, but in the meantime, try whether .reset()ting the form helps. It should bring all the form values back to their predefined state (=unchecked).