JavaScript 页面重访

Question

我在电话输入框前面添加国际国家拨号代码，不使用以下代码。

$( document ).ready(function() {        
    var input = document.querySelector("#phone1");      
    window.intlTelInput(input, {
        utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js",
        initialCountry: "gb", 
        separateDialCode: true,
    });
});

当我正常浏览时，这段代码运行良好。我在此页面中有一个提交按钮。提交表单后，此页面将重定向到下一页。我在下一页有一个后退按钮。当我在下一页中翻页按钮时，下面的代码正在工作。

$(document).on("click", ".locationBack", function () {
    var property_id = $('.property_id').val()
    getPropertyInformation(property_id)
    stepActiveClass(1)
});

当我按后退按钮时

Dial Code

代码不起作用。

Answer 1

这种情况会正确发生，因为页面被浏览器缓存，当您返回历史记录时，它会呈现缓存的版本，这可能导致 JavaScript 无法重新执行或初始化。

解决方案是使用

pageshow

而不是

$(document).ready()

，每次加载页面时都会触发，即使是从浏览器缓存加载

$(window).on("pageshow", function(event) {
    const input = document.querySelector("#phone1");
    window.intlTelInput(input, {
        utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js",
        initialCountry: "gb", 
        separateDialCode: true,
    });
});