亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

用戶點擊后退按鈕后未顯示動態創建的輸入元素

用戶點擊后退按鈕后未顯示動態創建的輸入元素

精慕HU 2022-10-13 16:03:12
我使用以下代碼創建動態輸入元素:<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>如果我發送表單并點擊 BACK 按鈕,所有其他輸入元素都會顯示用戶的文本,動態創建的輸入字段除外。字段本身不顯示。我試圖通過 jQuery 將用戶的文本放入隱藏字段,但在 BACK 按鈕后它也消失了。在用戶點擊 BACK 按鈕后,如何向用戶顯示整個表單的先前狀態?解決方案:如果我將用戶的文本放入帶有 style="display:none" 的 type="text" 元素中,我會在 BACK 按鈕之后獲得文本,并且可以使用用戶的文本重新創建動態字段。感謝大家的建議,希望這能幫助遇到這個問題的其他人。
查看完整描述

3 回答

?
慕姐4208626

TA貢獻1852條經驗 獲得超7個贊

發布表單后,瀏覽器會導航到您<form>action. 當您返回時,它會重新加載您的頁面,并且所有腳本的狀態都會重置,因為頁面已重新加載。

如果要保持該狀態,則需要通過 AJAX 發送表單。您也可以使用 jQuery 來做到這一點(請參見此處)。然后你甚至不需要點擊后退按鈕。


查看完整回答
反對 回復 2022-10-13
?
MMTTMM

TA貢獻1869條經驗 獲得超4個贊

我想也許我在聊天后現在完全理解你的問題了,我希望,無論如何!--

瀏覽器代碼緩存

當您在 Chrome 或瀏覽器中下載頁面時,它會存儲在本地瀏覽器緩存中。但它存儲頁面的命令,而不是狀態。因此,當您返回時,將根據 HTML 和 CSS 命令重新呈現 HTML,并重新執行 JS。我從 Chrome 的官方開發博客 v8.com 找到了一些信息......

當第二次請求 JS 文件時(即熱運行),Chrome 會從瀏覽器緩存中獲取該文件,并再次將其交給 V8 進行編譯。然而,這一次,編譯后的代碼被序列化,并作為元數據附加到緩存的腳本文件中。

因此,您會看到,當您點擊后退按鈕時,它會重新編譯并重新運行 JavaScript,但它不會恢復上次運行的 JavaScript 生成的先前元素,或者用戶提交的觸發該狀態的事件。

來源:V8.com:JavaScript 開發人員的代碼緩存

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

不要將其與緩存的表單數據混為一談,這是完全不同的。 Chrome 會自動使用后退按鈕緩存您的舊表單數據,但這不是代碼緩存功能的一部分。針對該問題查看類似的問題:使用瀏覽器后退按鈕返回時清除表單中的所有字段

谷歌 2019 年 2 月更新:這似乎應該在不久的將來某個時間修復。資料來源:探索 Chrome 的后退/前進緩存。


查看完整回答
反對 回復 2022-10-13
?
紫衣仙女

TA貢獻1839條經驗 獲得超15個贊

這是一個解決方案:

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

感謝大家的建議,希望這能幫助遇到這個問題的其他人。


查看完整回答
反對 回復 2022-10-13
  • 3 回答
  • 0 關注
  • 121 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號