javascript - 如何在点击事件中更新HTML元素？

我真的是编程新手，我正在尝试构建一个随机报价机。
单击“新报价”按钮后，用户应该能够获得新的随机报价。
我的问题是，我第一次单击“新报价”按钮时得到一个新报价，但是随后的单击事件中，报价不再更改。有人可以识别出我的代码中的问题所在吗？

这是我的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);
     });

   });
 });

最佳答案

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

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



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



缓存会缓存

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

$.ajaxSetup({ cache: false });

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

需要更多？

最后，您会注意到，您的querystring参数之一似乎确切指定要提取[posts_per_page]=1的记录数。如果要检索多个引号并实际使用forEach()函数，则可能需要调整此值。