.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 randomNumber

function getQuote() {

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

  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 2

您的脚本几乎没有变化，并且已经完成。

<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>

小提琴示例