如何在点击事件上更新HTML元素？

Question

我是编程新手，我正在尝试构建一个随机报价机器。 用户应该能够在点击＆＃34;新报价时获得新的随机报价＆＃34;按钮。 我的问题是，当我第一次点击＆＃34;新报价时，我得到一个新的报价＆＃34;按钮，但随后点击事件后报价不再发生变化。有人可以识别我的代码中的问题所在吗？

这是我的HTML：

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" />

<div class="container-fluid">

  <div class="header">
    <h1 class="title"> Antsa's Random Quote Machine </h1>

  </div>

  <div class="quote_box">

    <div class="col-xs-12 well quote">
      Quote will go here
    </div>

    <div class="row col-xs-12">
      <a href="https://twitter.com/antsarand" target="_blank"><button class ="btn btn-primary"><i class="fa fa-twitter" id="twitter"></i> </button></a>

      <button id = "newQuote" class = "btn btn-primary">
        New Quote
      </button>
    </div>


    </div>

  </div>
</div>

这是我的javascript代码：

$(document).ready(function() {

   $("#newQuote").on("click", function() {
     $.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1", function(json) {
       var html = "";
       json.forEach(function(val) {

         html += "<div class = 'quote'> ";

         html += "<p class = 'quotation'>" + val.content + val.title + "</p>";

         html += "</div>";
       });
       $(".quote").html(html);
     });

   });
 });

Answer 1

不信任示例（不检查控制台）

您的代码应该可以正常工作，Codepen示例不支持跨源请求，因此它们阻止了您的AJAX调用：

但是如果你use a different example provider like JSBin他们应该按预期工作：

缓存缓存

如果您计划在同一页面内发出多个请求，请考虑通过jQuery代码中的以下语句显式禁用缓存：

$.ajaxSetup({ cache: false });

这将阻止任何缓存发生，并确保每次都提取新报价。

需要更多？

最后，您会注意到，您的一个查询字符串参数似乎准确指定要提取的记录数[posts_per_page]=1。如果您想要检索多个引号并实际使用forEach()函数，则可能需要对此进行调整。

Answer 2

来自quotesondesign.com的回复正在缓存中。您需要在某个位置添加$.ajaxSetup({ cache: false });，可能是$(document).ready()，或者只需在点击处理程序中添加。{/ p>