.click() 仅触发一次，之后不再触发，除非我刷新整个页面，并且如果我调用

Question

我正在尝试从 JSON 文件中检索引用及其作者，我遇到的问题是，一旦我单击按钮一次，事件就会被触发，但只会触发一次，此后不再触发。同样，当我调用 $(document).ready() 时，按钮根本不会触发。

我知道这与我从 JSON 文件（是带有文本、作者密钥的对象数组）收集数据的方式有关，然后当我想要检索具有正确的新报价时调用 fetch作者。

// https://type.fit/api/quotes //

// api link for quotes //

const button = document.getElementById('new-quote');

const baseUrl = 'https://type.fit/api/quotes';

let randomNumber = Math.floor(Math.random() * 100);

function getQuote() {

 fetch(baseUrl)

  fetch(baseUrl)

  .then(response => response.json())

  .then(quote => $('#text-output').text(quote[randomNumber].text))

   };

function getAuthor() {

  fetch(baseUrl)

  .then(response => response.json())

  .then(quote => $('#author').text(quote[randomNumber].author))

};

function renderQuoteToPage() {

  getQuote();

  getAuthor();

}

$('#new-quote').click(renderQuoteToPage);

$(document).ready(renderQuoteToPage);

body {

  width: 100%;

  height: auto;

}

#outer-wrapper {

  display: flex;

  flex-direction: row;

  justify-content: center;

  align-items: center;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="outer-wrapper" class="container-fluid">

<div id="quote-box" class="card w-50">

  <div class="card-body">

  <div class="row">

    <div class="col">

  <div id="text">

    <p id="text-output"></p>

      </div>

    </div>

  </div>

  

    <div class="row">

      <div class="col">

      <a href="#" id="tweet-quote">Tweet</a>

      </div>

      <div class="col">

      <div id="author">Author</div>

      </div>

  </div>

  

  <div class="row">

    <div class="col">

  <button id="new-quote">New quote</button>

    </div>

  </div>

  

  </div>

</div>

  

</div>

Answer 1

您在附加处理程序时调用这些函数，因此在没有附加适当的处理程序的情况下调用它们，并且仅调用一次。您只需要函数定义：$('#new-quote').click(renderQuoteToPage);...$(document).ready(renderQuoteOnPageLoad);编辑：您还需要randomNumber在每次getQuote()通话时进行设置// https://type.fit/api/quotes //// api link for quotes //const button = document.getElementById('new-quote');const baseUrl = 'https://type.fit/api/quotes';let randomNumberfunction getQuote() {&nbsp; randomNumber = Math.floor(Math.random() * 100);&nbsp; fetch(baseUrl)&nbsp; &nbsp; .then(response => response.json())&nbsp; &nbsp; .then(quote => $('#text-output').text(quote[randomNumber].text))};function getAuthor() {&nbsp; fetch(baseUrl)&nbsp; &nbsp; .then(response => response.json())&nbsp; &nbsp; .then(quote => $('#author').text(quote[randomNumber].author))};function renderQuoteToPage() {&nbsp; getQuote();&nbsp; getAuthor();}$('#new-quote').click(renderQuoteToPage);$(document).ready(renderQuoteToPage);body {&nbsp; width: 100%;&nbsp; height: auto;}#outer-wrapper {&nbsp; display: flex;&nbsp; flex-direction: row;&nbsp; justify-content: center;&nbsp; align-items: center;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div id="outer-wrapper" class="container-fluid">&nbsp; <div id="quote-box" class="card w-50">&nbsp; &nbsp; <div class="card-body">&nbsp; &nbsp; &nbsp; <div class="row">&nbsp; &nbsp; &nbsp; &nbsp; <div class="col">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div id="text">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p id="text-output"></p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div class="row">&nbsp; &nbsp; &nbsp; &nbsp; <div class="col">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="#" id="tweet-quote">Tweet</a>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="col">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div id="author">Author</div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div class="row">&nbsp; &nbsp; &nbsp; &nbsp; <div class="col">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button id="new-quote">New quote</button>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; </div></div>

Answer 2

您的脚本几乎没有变化，并且已经完成。<script>const button = document.getElementById('new-quote');const baseUrl = 'https://type.fit/api/quotes';let randomNumber;function getQuote() {&nbsp; fetch(baseUrl)&nbsp; .then(response => response.json())&nbsp; .then(quote => $('#text-output').text(quote[randomNumber].text))&nbsp; &nbsp;};function getAuthor() {&nbsp; fetch(baseUrl)&nbsp; .then(response => response.json())&nbsp; .then(quote => $('#author').text(quote[randomNumber].author))};function renderQuoteOnPageLoad() {&nbsp; randomNumber = Math.floor(Math.random() * 100);&nbsp; getQuote();&nbsp; getAuthor();}$(document).ready(function(){&nbsp; &nbsp; renderQuoteOnPageLoad();});&nbsp;$(document).on("click","#new-quote",function(){&nbsp; &nbsp; renderQuoteOnPageLoad()&nbsp;})</script>小提琴示例