首頁(yè) 猿問用戶點(diǎn)擊后退按鈕后未顯示動(dòng)態(tài)創(chuàng)建的...

用戶點(diǎn)擊后退按鈕后未顯示動(dòng)態(tài)創(chuàng)建的輸入元素

JavaScript

精慕HU 2022-10-13 16:03:12

我使用以下代碼創(chuàng)建動(dòng)態(tài)輸入元素：<div id="add">Add row</div><script>$(document).on('click', '#add', function() { var number = $('div[id^="row_"]').length + 1; $('#add').before('<div id="row_'+number+'"><label for="answer_'+number+'">Question #'+number+'</label> <input id="answer_'+number+'" name="answer_'+number+'" type="text"></div>');});</script>如果我發(fā)送表單并點(diǎn)擊 BACK 按鈕，所有其他輸入元素都會(huì)顯示用戶的文本，動(dòng)態(tài)創(chuàng)建的輸入字段除外。字段本身不顯示。我試圖通過 jQuery 將用戶的文本放入隱藏字段，但在 BACK 按鈕后它也消失了。在用戶點(diǎn)擊 BACK 按鈕后，如何向用戶顯示整個(gè)表單的先前狀態(tài)？解決方案：如果我將用戶的文本放入帶有 style="display:none" 的 type="text" 元素中，我會(huì)在 BACK 按鈕之后獲得文本，并且可以使用用戶的文本重新創(chuàng)建動(dòng)態(tài)字段。感謝大家的建議，希望這能幫助遇到這個(gè)問題的其他人。

查看完整描述

3 回答

慕姐4208626

TA貢獻(xiàn)1852條經(jīng)驗(yàn) 獲得超7個(gè)贊

發(fā)布表單后，瀏覽器會(huì)導(dǎo)航到您<form>的action. 當(dāng)您返回時(shí)，它會(huì)重新加載您的頁(yè)面，并且所有腳本的狀態(tài)都會(huì)重置，因?yàn)轫?yè)面已重新加載。

如果要保持該狀態(tài)，則需要通過 AJAX 發(fā)送表單。您也可以使用 jQuery 來(lái)做到這一點(diǎn)（請(qǐng)參見此處）。然后你甚至不需要點(diǎn)擊后退按鈕。

反對(duì) 回復(fù) 2022-10-13

MMTTMM

TA貢獻(xiàn)1869條經(jīng)驗(yàn) 獲得超4個(gè)贊

我想也許我在聊天后現(xiàn)在完全理解你的問題了，我希望，無(wú)論如何！--

瀏覽器代碼緩存

當(dāng)您在 Chrome 或?yàn)g覽器中下載頁(yè)面時(shí)，它會(huì)存儲(chǔ)在本地瀏覽器緩存中。但它存儲(chǔ)頁(yè)面的命令，而不是狀態(tài)。因此，當(dāng)您返回時(shí)，將根據(jù) HTML 和 CSS 命令重新呈現(xiàn) HTML，并重新執(zhí)行 JS。我從 Chrome 的官方開發(fā)博客 v8.com 找到了一些信息......

當(dāng)?shù)诙握?qǐng)求 JS 文件時(shí)（即熱運(yùn)行），Chrome 會(huì)從瀏覽器緩存中獲取該文件，并再次將其交給 V8 進(jìn)行編譯。然而，這一次，編譯后的代碼被序列化，并作為元數(shù)據(jù)附加到緩存的腳本文件中。

因此，您會(huì)看到，當(dāng)您點(diǎn)擊后退按鈕時(shí)，它會(huì)重新編譯并重新運(yùn)行 JavaScript，但它不會(huì)恢復(fù)上次運(yùn)行的 JavaScript 生成的先前元素，或者用戶提交的觸發(fā)該狀態(tài)的事件。

來(lái)源：V8.com：JavaScript 開發(fā)人員的代碼緩存

后向緩存 (BFCache)/瀏覽器表單緩存

不要將其與緩存的表單數(shù)據(jù)混為一談，這是完全不同的。 Chrome 會(huì)自動(dòng)使用后退按鈕緩存您的舊表單數(shù)據(jù)，但這不是代碼緩存功能的一部分。針對(duì)該問題查看類似的問題：使用瀏覽器后退按鈕返回時(shí)清除表單中的所有字段

谷歌 2019 年 2 月更新：這似乎應(yīng)該在不久的將來(lái)某個(gè)時(shí)間修復(fù)。資料來(lái)源：探索 Chrome 的后退/前進(jìn)緩存。

反對(duì) 回復(fù) 2022-10-13

紫衣仙女

TA貢獻(xiàn)1839條經(jīng)驗(yàn) 獲得超15個(gè)贊

這是一個(gè)解決方案：

我試圖通過 jQuery 將用戶的文本放入 type="hidden" 元素中，但是在 BACK 按鈕之后它已經(jīng)丟失了，但是如果我將答案放入 style="display:none 的 type="text" 元素中"，我在 BACK 按鈕之后有用戶的文本，我可以使用用戶的文本重新創(chuàng)建動(dòng)態(tài)字段。

感謝大家的建議，希望這能幫助遇到這個(gè)問題的其他人。

反對(duì) 回復(fù) 2022-10-13