Javascript CodePen和jQuery的问题

我创建了一个简单的页面，显示来自API的随机引用。但是，单击我的“newquote”元素不会触发

getQuote

函数。以下是我的代码链接：

---

我怀疑这与jQuery有关，因为Chrome控制台显示一个错误，提到它拒绝加载脚本（参考jQuery）。奇怪的是，当我在Chrome中打开开发工具时，点击“newquote”，它就可以工作了

浏览器正在缓存您第一次调用API时的响应，并在以后的调用中重用该响应。您可以通过向URL添加cachebuster来解决此问题

当您打开控制台时，它工作的原因是您可能设置了禁用缓存（而DevTools是打开的）选项

function getQuote() {
  var cb = Math.round(new Date().getTime() / 1000);
  $.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=" + cb, function(a) {
    $(".quote-text").html(a[0].content + "<p>— " + a[0].title + "</p>");
  });
}

函数getQuote（）{ var cb=Math.round（new Date（）.getTime（）/1000）； $.getJSON（“http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=“+cb，函数（a）{ $（“.quote text”）.html（a[0]。内容+”-“+a[0]。标题+”

”； }); }

---

浏览器将在您第一次调用API时缓存响应，并在以后的调用中重用该响应。您可以通过向URL添加cachebuster来解决此问题

当您打开控制台时，它工作的原因是您可能设置了禁用缓存（而DevTools是打开的）选项

function getQuote() {
  var cb = Math.round(new Date().getTime() / 1000);
  $.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=" + cb, function(a) {
    $(".quote-text").html(a[0].content + "<p>— " + a[0].title + "</p>");
  });
}

函数getQuote（）{ var cb=Math.round（new Date（）.getTime（）/1000）； $.getJSON（“http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=“+cb，函数（a）{ $（“.quote text”）.html（a[0]。内容+”-“+a[0]。标题+”

”； }); }

---

您可以完全摆脱funciton调用，然后给

$。ajax

一次这样的尝试：

$(".button").on("click", function(e) {
  e.preventDefault();
  $.ajax({
      url: 'http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1',
      success: function(a) {
        $(".quote-text").html(a[0].content + "<p>— " + a[0].title + "</p>")
      },
      cache: false
   });
});

$（.button”）。在（“单击”上，函数（e）{
e、 预防默认值（）；
$.ajax({
网址：'http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts\u per\u page]=1'，
成功：职能（a）{
$（“.quote text”）.html（a[0].content+“-”+a[0].title+“
”）
},
缓存：false
});
});

---

使用

cache:false

可以防止每次调用都进行缓存，因此每次按预期单击按钮时内容都会更改。

您可以完全取消函数调用，并提供

$。ajax

类似的尝试：

$(".button").on("click", function(e) {
  e.preventDefault();
  $.ajax({
      url: 'http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1',
      success: function(a) {
        $(".quote-text").html(a[0].content + "<p>— " + a[0].title + "</p>")
      },
      cache: false
   });
});

$（.button”）。在（“单击”上，函数（e）{
e、 预防默认值（）；
$.ajax({
网址：'http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts\u per\u page]=1'，
成功：职能（a）{
$（“.quote text”）.html（a[0].content+“-”+a[0].title+“
”）
},
缓存：false
});
});

---

使用

cache:false

可以防止每次调用都进行缓存，因此每次按预期单击按钮时内容都会更改。

我在开发人员控制台中没有看到此类错误（或任何错误），尽管按钮似乎仍然不起任何作用。事件正在触发。我添加了

console.log（'test'）行到两个函数的开头，当我单击按钮时，这两个函数都在控制台上导致输出。我认为浏览器正在缓存响应。打开控制台可以使其正常工作，因为您可以使用DevTools选项在调试时禁用缓存。请向URL添加cachebuster。谢谢Woodrow。我还验证了click事件是否被触发。对API的
.getJSON
调用一定有问题。有什么想法吗？我在开发人员控制台中没有看到这样的错误（或任何错误），尽管按钮似乎仍然没有任何作用。事件正在触发。我添加了
console.log（'test'）行到两个函数的开头，当我单击按钮时，这两个函数都在控制台上导致输出。我认为浏览器正在缓存响应。打开控制台可以使其正常工作，因为您可以使用DevTools选项在调试时禁用缓存。请向URL添加cachebuster。谢谢Woodrow。我还验证了click事件是否被触发。对API的
.getJSON
调用一定有问题。有什么想法吗？重要的部分是
cache:false
，你应该在答案中提及。重要的部分是
cache:false
，你应该在答案中提及。