Перемещение галочек в списках флажков после перезагрузки страницы - только Firefox

Question

Я получаю странное поведение в Firefox всякий раз, когда ставлю флажки внутри списка (ol, ul, dl), а затем динамически вставляю кнопки над списком. Если я начну с чего-то простого списка вроде этого:

<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 или что-то подобное, это нормально. Если я заменю тег dl на div (и избавлюсь от тегов 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

Попробуйте:

<form autocomplete="off">

Answer 3

Интересное поведение. Я предполагаю, что это механизм Firefox «запоминать значения полей формы», который не работает - как и почему, я не знаю, хотя.

Конечно, проблема может быть вызвана чем-то, что находится за пределами кода, который вы нам показали. Вы на 100% уверены, что нет хитрых подпрограмм JQuery, других плагинов или чего-то еще?

Проблема, безусловно, заслуживает дополнительных исследований, но пока попробуйте, поможет ли .reset() форма. Он должен вернуть все значения формы в предопределенное состояние (= не проверено).

Answer 4

Просто оберните свой список в элемент формы. Firefox, чем может корректно работать с флажками.

С уважением.

Answer 5

обновление: используйте $('input[type=checkbox]').attr("autocomplete", "off");, чтобы отключить кеширование Firefox значения флажка. (я все еще не могу обойти кэширование по гипотезе индекса).

я тоже пробовал

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

с такими же результатами. Похоже, что Firefox запоминает, какой флажок установлен, основываясь на его индексе, поэтому при обновлении он прыгает, потому что div перед флажками еще не сделан. но это, очевидно, предположение, так как на самом деле кнопки будут двумя элементами перед флажками в любом случае.