用 Javascript onClick 替换 HTML，必须刷新才能看到变化答案

【问题标题】：Swapping out HTML with Javascript onClick, having to refresh to see change用 Javascript onClick 替换 HTML，必须刷新才能看到变化
【发布时间】：2014-05-24 16:46:35
【问题描述】：

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

按照我目前的设置方式，它在单击时返回“未定义”，然后在刷新时显示正确的 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>');
}

【问题讨论】：

只是出于好奇，为什么要混合使用 jQuery('.result') 和 $('.resultHeader') 语法？我失踪很可能是有充分理由的。
.resultHeader 是我将邮政编码附加到的 H4 标签的类，.result 是显示实际结果的区域。也许我应该只替换 div 中的所有 HTML 而不是 2 个单独的位置？
我说的是 JQuery 调用本身，而不是有问题的元素。您可以使用“JQuery”。或“$”。他们都是同一个意思。只是看起来很奇怪（至少对我来说）。
哦，我明白你的意思了，是的，这是我的一个坏习惯。我对 jQuery 还是很陌生，我一直在使用 Wordpress，它与 Wordpress 兼容，有时我在编码时混合它们，特别是如果我从以前的 wordpress 项目中借用代码。无论如何，再次感谢您的修复，不胜感激！
老实说，我也在做同样的事情，这就是我注意到的原因。我“写”的大多数 JQuery 都是从某个地方复制而来的。我知道它是如何工作的以及做什么，但有时我很难记住它的确切语法。

标签： javascript jquery cookies sessionstorage

【解决方案1】：

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

// 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

}

请注意，添加一个单独的函数来同时更改两者可能是值得的。您可以使用它作为您的回调，并避免维护 2 段代码。

【讨论】：

啊哈！没想到，现在试试看。
这是您需要远离才能看到的东西之一。您自己回答：“我假设我必须设置某种等待功能或其他东西，以便在定义邮政编码之前，替换标题文本的功能不会触发。” - 这正是回调的用途。