Javascript .click（）仅触发一次，之后不再触发，除非我刷新整个页面，并且如果调用$（document）.ready（）则根本不渲染

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

我知道这与我从JSON文件收集数据的方式有关，JSON文件是一个包含文本、作者键的对象数组，然后在我想要检索具有正确作者的新引用时调用fetch

// https://type.fit/api/quotes // //用于报价的api链接// const button=document.getElementById'new-quote'； 常量baseUrl=https://type.fit/api/quotes'; 设randomNumber=Math.floorMath.random*100； 函数getQuote{ fetchbaseUrl fetchbaseUrl .thenresponse=>response.json .thenquote=>$'text-output'.textquote[randomNumber].text }; 函数getAuthor{ fetchbaseUrl .thenresponse=>response.json .thenquote=>$作者.textquote[randomNumber].作者 }; 函数renderQuoteToPage{ getQuote； 作者； } $'new-quote'。单击RenderQuote页面； $document.readyRenderQuotePage； 身体{ 宽度：100%； 高度：自动； } 外包装{ 显示器：flex； 弯曲方向：行； 证明内容：中心； 对齐项目：居中； }

著者 新报价

---

当您附加处理程序时，您正在调用函数，因此在不附加相应处理程序的情况下调用它们，并且只调用一次

您只需要函数定义：

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

编辑：您还需要在每个getQuote调用上设置randomNumber

// https://type.fit/api/quotes // //用于报价的api链接// const button=document.getElementById'new-quote'； 常量baseUrl=https://type.fit/api/quotes'; 让随机数 函数getQuote{ 随机数=Math.floorMath.random*100； fetchbaseUrl .thenresponse=>response.json .thenquote=>$'text-output'.textquote[randomNumber].text }; 函数getAuthor{ fetchbaseUrl .thenresponse=>response.json .thenquote=>$作者.textquote[randomNumber].作者 }; 函数renderQuoteToPage{ getQuote； 作者； } $'new-quote'。单击RenderQuote页面； $document.readyRenderQuotePage； 身体{ 宽度：100%； 高度：自动； } 外包装{ 显示器：flex； 弯曲方向：行； 证明内容：中心； 对齐项目：居中； }

著者 新报价

---

当您附加处理程序时，您正在调用函数，因此在不附加相应处理程序的情况下调用它们，并且只调用一次

您只需要函数定义：

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

编辑：您还需要在每个getQuote调用上设置randomNumber

// https://type.fit/api/quotes // //用于报价的api链接// const button=document.getElementById'new-quote'； 常量baseUrl=https://type.fit/api/quotes'; 让随机数 函数getQuote{ 随机数=Math.floorMath.random*100； fetchbaseUrl .thenresponse=>response.json .thenquote=>$'text-output'.textquote[randomNumber].text }; 函数getAuthor{ fetchbaseUrl .thenresponse=>response.json .thenquote=>$作者.textquote[randomNumber].作者 }; 函数renderQuoteToPage{ getQuote； 作者； } $'new-quote'。单击RenderQuote页面； $document.readyRenderQuotePage； 身体{ 宽度：100%； 高度：自动； } 外包装{ 显示器：flex； 弯曲方向：行； 证明内容：中心； 对齐项目：居中； }

著者 新报价

---

您的脚本和脚本中几乎没有更改

<script>
const button = document.getElementById('new-quote');
const baseUrl = 'https://type.fit/api/quotes';
let randomNumber;

function getQuote() {
  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 renderQuoteOnPageLoad() {
  randomNumber = Math.floor(Math.random() * 100);
  getQuote();
  getAuthor();
}

$(document).ready(function(){
    renderQuoteOnPageLoad();
});

 $(document).on("click","#new-quote",function(){
    renderQuoteOnPageLoad()
 })
</script>

---

您的脚本中几乎没有更改，并且它已完成

<script>
const button = document.getElementById('new-quote');
const baseUrl = 'https://type.fit/api/quotes';
let randomNumber;

function getQuote() {
  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 renderQuoteOnPageLoad() {
  randomNumber = Math.floor(Math.random() * 100);
  getQuote();
  getAuthor();
}

$(document).ready(function(){
    renderQuoteOnPageLoad();
});

 $(document).on("click","#new-quote",function(){
    renderQuoteOnPageLoad()
 })
</script>

---

可以在codepen上查看画笔…-请在问题中添加一个链接，而不仅仅是一个指向外部资源的链接，该资源可能因任何原因而不可用->可以在codepen上查看画笔…-请在问题中添加一个链接，而不仅仅是一个指向外部资源的链接，该资源可能因任何原因而不可用->您好，我已经尝试过了，但仍然存在相同的问题；一开始，每次电话都是一样的，你得到的报价也是一样的。您需要在每次getQuote调用中设置它。检查编辑以回答hi，我已经尝试过了，但仍然存在相同的问题；一开始，每个ca都是一样的 我会给你同样的报价。您需要在每次getQuote调用中设置它。检查编辑以回答问题