頁面重新加載後在複選框列表中移動複選框 - Firefox only

每當我將複選框放入列表（ol，ul，dl）中，然後在列表上方動態插入按鈕時，我在Firefox中會遇到一些奇怪的行爲。如果我開始用一些簡單的列表是這樣的：頁面重新加載後在複選框列表中移動複選框 - Firefox only

<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標籤），那就沒問題。但我需要兩個按鈕，並且複選框必須位於我正在嘗試構建的列表中。

有誰知道是什麼原因造成的？

來源

2010-02-09 DaveS

甚至還有怪物，我加載你的HTML，然後選中框1，然後運行你的js兩次。當我刷新時，檢查框是框3.我認爲你已經發現自己的錯誤。 – 2010-02-09 21:54:29

有趣的行爲。我的猜測是，這是Firefox的「記憶表單字段值」機制出錯 - 如何以及爲什麼，但我不知道。

該問題當然也可能是由您向我們顯示的代碼之外的內容引起的。你是否100％肯定沒有棘手的JQuery例程，其他插件或任何東西？

這個問題當然值得更多的研究，但同時，請試試.reset()是否有幫助。它應該將所有的表單值返回到它們的預定義狀態（=未選中）。

來源

2010-02-09 21:47:50

當然！ Firefox會記住緩存頁面的表單狀態和JavaScript狀態。感謝你的想法。如果我在onunload事件或Firefox自己的pageHide事件（如果我仍然希望頁面緩存）上調用它，則使用重置事件可用於我的目的。更多信息請訪問：https：//developer.mozilla.org/en/Using_Firefox_1.5_caching。其他瀏覽器不同地記住狀態...雖然通過增加上述示例的複雜性，我能夠從IE中獲得一些不同的奇怪行爲。我還沒有發現類似Chrome的行爲。 – DaveS 2010-02-09 22:11:40

更新：使用$('input[type=checkbox]').attr("autocomplete", "off");禁用Firefox的緩存複選框的值。（我仍然無法繞過索引假設的緩存）。

我也嘗試

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

具有相同的結果。看來Firefox會記住哪個盒子是根據它的索引進行檢查的，所以當你刷新它的跳躍時，因爲複選框之前的div還沒有被創建。但這顯然是一種猜測，因爲無論如何，按鈕在複選框之前都是兩個元素。

來源

2010-02-09 22:09:14

首先，刪除腳本會導致預期的行爲;然而，給人的複選框唯一的名稱更改描述/問題行爲到這不是那麼有問題的：

<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修復了原始問題，並導致複選框選擇行爲通常是在頁面刷新後執行的。我現在正在深入研究這個問題。

來源

2010-02-09 22:09:21

有趣的是insertAfter工作，但insertBefore不工作。 +1找到。一個jQuery的錯誤？ – DaveS 2010-02-09 22:15:59

它看起來像一個DOM/Firefox問題。即使您在'

'列表之前的標記中有div，並使用vanilla DOM方法來插入按鈕，問題仍然會發生。 – 2010-02-10 01:18:23

@DaveS請接受此爲正確答案 – shishirmk 2013-04-26 01:27:32

嘗試：

<form autocomplete="off">

來源

2010-05-28 21:25:18 Tim

我把你的解決方案，但呃..我討厭包括自定義標記只是爲了防止愚蠢的行爲https://developer.mozilla.org/en/how_to_turn_off_form_autocompletion – rmontagud 2010-07-09 11:34:34

簡單地包裹在一個表單元素列表。 Firefox可以正確使用複選框。

此致敬禮。

來源

2011-04-29 08:54:04 Marco

對不起，不起作用。 – DaveS 2011-05-05 18:08:13

頁面重新加載後在複選框列表中移動複選框 - Firefox only

回答

相關問題