首页 > 解决方案 > 当调用浏览器后退按钮时,$(document).ready() 在 v2 和 v3 中的行为是否不同?

问题描述

我有一个典型<FORM>的页面,加载页面时其字段为空。

如果用户在提交表单后点击浏览器返回按钮,页面将显示用户填写的字段。但是,任何在回调中读取这些字段的尝试$document.ready()都会返回空值。这适用于 jQuery v2。

使用 v3,它似乎可以正常工作。

在我为现有的生产网站测试和迁移到 v3 的工作预算之前,我想确认这是否是一个已知的差异。

jQuery v2:

window.addEventListener("load", ()=> {
  console.log("! textbox:", document.getElementById("textbox").value);
});
$(document).ready(() => {
  console.log("$ textbox:", document.getElementById("textbox").value);
});
<p>1. Enter something in the textbox and click Submit. 2. Click the browser back button. 3. Check console log.</p>

<form method="post">
  <input id='textbox' required />
  <br/>
  <input type="submit" />
</form>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js'></script>

jQuery v3:

window.addEventListener("load", ()=> {
  console.log("! textbox:", document.getElementById("textbox").value);
});
$(document).ready(() => {
  console.log("$ textbox:", document.getElementById("textbox").value);
});
<p>1. Enter something in the textbox and click Submit. 2. Click the browser back button. 3. Check console log.</p>

<form method="post">
  <input id='textbox' required />
  <br/>
  <input type="submit" />
</form>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

标签: jquery

解决方案


推荐阅读