![除非我刷新整个页面并且在调用]( "除非我刷新整个页面并且在调用")
本文介绍了.click() 只触发一次，之后不再触发，除非我刷新整个页面并且在调用 $(document).ready() 时根本不呈现的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试从 JSON 文件中检索引用及其作者，我遇到的问题是，一旦我单击该按钮一次，就会触发该事件，但仅触发一次，此后不再触发.同样，当我调用 $(document).ready() 时，按钮根本不会触发.
我知道这与我从 JSON 文件(是一个带有文本、作者键的对象数组)收集数据的方式有关，然后在我想检索新报价时调用 fetch与正确的作者.
//https://type.fit/api/quotes////报价的 api 链接//const button = document.getElementById('new-quote');const baseUrl = 'https://type.fit/api/quotes';让 randomNumber = Math.floor(Math.random() * 100);函数 getQuote() {获取(baseUrl)获取(baseUrl).then(response => response.json()).then(quote => $('#text-output').text(quote[randomNumber].text))};函数 getAuthor() {获取(baseUrl).then(response => response.json()).then(quote => $('#author').text(quote[randomNumber].author))};函数 renderQuoteToPage() {获得报价();获取作者()；}$('#new-quote').click(renderQuoteToPage);$(document).ready(renderQuoteToPage);
body {宽度:100%；高度:自动；}#外包装{显示:弹性；弹性方向:行；对齐内容:居中；对齐项目:居中；}
<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="文本"><p id="文本输出"></p>
<div class="row"><div class="col"><a href="#" id="tweet-quote">Tweet</a>
<div class="col"><div id="作者">作者</div>
<div class="row"><div class="col"><button id="new-quote">新报价</button>
解决方案
您在附加处理程序时调用了这些函数，因此在没有附加适当的处理程序的情况下调用它们，并且只调用一次.
您只需要函数定义:
$('#new-quote').click(renderQuoteToPage);...$(document).ready(renderQuoteOnPageLoad);
您还需要在每个 getQuote() 调用上设置 randomNumber
//https://type.fit/api/quotes////报价的 api 链接//const button = document.getElementById('new-quote');const baseUrl = 'https://type.fit/api/quotes';让随机数函数 getQuote() {randomNumber = Math.floor(Math.random() * 100);获取(baseUrl).then(response => response.json()).then(quote => $('#text-output').text(quote[randomNumber].text))};函数 getAuthor() {获取(baseUrl).then(response => response.json()).then(quote => $('#author').text(quote[randomNumber].author))};函数 renderQuoteToPage() {获得报价();获取作者()；}$('#new-quote').click(renderQuoteToPage);$(document).ready(renderQuoteToPage);
body {宽度:100%；高度:自动；}#外包装{显示:弹性；弹性方向:行；对齐内容:居中；对齐项目:居中；}
<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="文本"><p id="文本输出"></p>
<div class="row"><div class="col"><a href="#" id="tweet-quote">Tweet</a>
<div class="col"><div id="作者">作者</div>
<div class="row"><div class="col"><button id="new-quote">新报价</button>
I am trying to retrieve a quote and its author from a JSON file, the problem I am having is that once I click the button once, then the event is fired but only once and no more after that. Equally, when I call $(document).ready() the button doesn't fire at all.
I know that it is something to do with the way I am collecting the data from the JSON file (is an array of objects with text, author keys), and then subsequently calling the fetch when I want to retrieve a new quote with the correct author.
// 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>
解决方案
You are calling the functions when you attach the handlers, so they are invoked without the appropriate handler being attached, and just once.
You need just the function definition:
$('#new-quote').click(renderQuoteToPage);
...
$(document).ready(renderQuoteOnPageLoad);
Edit: You also need to set randomNumber on each getQuote() call
// 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>
这篇关于.click() 只触发一次，之后不再触发，除非我刷新整个页面并且在调用 $(document).ready() 时根本不呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！
09-01 17:07