用Javascript onClick替换HTML，必须刷新才能看到更改

我正在我的网站边栏上设置一个地理搜索栏。当用户单击允许地理位置的链接时，我试图在侧边栏的标题中显示他们的zipcode。这很好，但在初次单击时，您必须刷新页面才能显示邮政编码

按照我目前的设置方式，单击时返回“Undefined”，然后刷新时显示正确的zip。我假设我必须设置某种等待函数或类似的东西，以便在定义邮政编码之前不会触发替换标题文本的函数

有什么想法吗？谢谢

下面是javascript：

// Set sessionStorage paramater on click
$('#findLocations').click(function() {
    jQuery.ajax({
      type: "GET",
      dataType: "html",
      url: "/search/georesults.html",
      success: function(closestLocation) {
        jQuery('.result').html(closestLocation);
      } // end success
    }); // end ajax
    $('.resultHeader').html('Stores nearest <div class="zip">' + userZip + '</div>');
    sessionStorage.UseIP = "Yes"
});

// Check for UseIP and display nearest locations if set
if ( sessionStorage.UseIP == "Yes" ){
    jQuery.ajax({
      type: "GET",
      dataType: "html",
      url: "/search/georesults.html",
      success: function(closestLocation) {
        jQuery('.result').html(closestLocation);
      } // end success
    }); // end ajax
    $('.resultHeader').html('Stores nearest <div class="zip">' + userZip + '</div>');
}

//单击设置会话存储参数
$（“#findLocations”）。单击（函数（）{
jQuery.ajax({
键入：“获取”，
数据类型：“html”，
url:“/search/georesults.html”，
成功：功能（关闭位置）{
jQuery（'.result'）.html（closestLocation）；
}//最终成功
})；//结束ajax
$（'.resultHeader'）.html（'存储最近的'+userZip+''）；
sessionStorage.UseIP=“是”
});
//检查UseIP并显示最近的位置（如果已设置）
如果（sessionStorage.UseIP==“是”）{
jQuery.ajax({
键入：“获取”，
数据类型：“html”，
url:“/search/georesults.html”，
成功：功能（关闭位置）{
jQuery（'.result'）.html（closestLocation）；
}//最终成功
})；//结束ajax
$（'.resultHeader'）.html（'存储最近的'+userZip+''）；
}

我会将结果标题更改移动到相同的成功回调中，如下所示：

// Set sessionStorage paramater on click
$('#findLocations').click(function() {
    $.ajax({
      type: "GET",
      dataType: "html",
      url: "/search/georesults.html",
      success: function(closestRep) {
        $('.result').html(closestRep);
        $('.resultHeader').html('Stores nearest <div class="zip">' + userZip + '</div>');
      } // end success
    }); // end ajax

    sessionStorage.UseIP = "Yes"
});

// Check for UseIP and display nearest locations if set
if ( sessionStorage.UseIP == "Yes" ){
    $.ajax({
      type: "GET",
      dataType: "html",
      url: "/search/georesults.html",
      success: function(closestLocation) {
        $('.result').html(closestLocation);
        $('.resultHeader').html('Stores nearest <div class="zip">' + userZip + '</div>');
      } // end success
    }); // end ajax

}

//单击设置会话存储参数
$（“#findLocations”）。单击（函数（）{
$.ajax({
键入：“获取”，
数据类型：“html”，
url:“/search/georesults.html”，
成功：功能（closestRep）{
$（'.result'）.html（closestRep）；
$（'.resultHeader'）.html（'存储最近的'+userZip+''）；
}//最终成功
})；//结束ajax
sessionStorage.UseIP=“是”
});
//检查UseIP并显示最近的位置（如果已设置）
如果（sessionStorage.UseIP==“是”）{
$.ajax({
键入：“获取”，
数据类型：“html”，
url:“/search/georesults.html”，
成功：功能（关闭位置）{
$（'.result'）.html（closestLocation）；
$（'.resultHeader'）.html（'存储最近的'+userZip+''）；
}//最终成功
})；//结束ajax
}

---

请注意，可能需要添加一个单独的函数来同时更改两者。您可以将其用作回调，避免维护两段代码。

出于好奇，为什么要混合使用jQuery（'.result'）和$（'.resultHeader'）语法？很可能有一个很好的理由我丢失了..resultTheader是我要附加邮政编码的H4标记的类，.result是显示实际结果的区域。也许我应该替换div中的所有HTML，而不是两个单独的位置？我说的是JQuery调用本身，而不是所讨论的元素。您可以使用“JQuery.”或“$”。它们的意思相同。只是看起来很奇怪（至少对我来说）。哦，我现在明白你的意思了，是的，这是我的一个坏习惯。我对jQuery还是相当陌生，我一直在与Wordpress合作，这是Wordpress的一个兼容性问题，有时我在编码时会混合使用它们，特别是如果我从以前的Wordpress项目中借用代码的话。无论如何，再次感谢您的修复，非常感谢！我真的做了同样的事情，这就是为什么我注意到了。我“编写”的大多数JQuery都是从某处复制的。我知道它是如何工作的，也知道它是做什么的，但有时我记不住它的确切语法。啊哈！我甚至没有想过，现在就尝试一下。这是你需要远离一步才能看到的事情之一。您自己回答：“我假设我必须设置某种等待函数或其他东西，以便替换标题文本的函数在定义邮政编码之前不会启动。”-这正是回调的目的。