我想在加载页面以及在输入字段中放入一些文本时使用单个提取请求。例如，页面A带有输入字段，用户将键入内容，然后将其重定向到页面B，在该页面中将立即调用获取请求并返回结果。然后，当用户在页面B上并且如果要更改搜索条件时，我想创建一个新的提取请求并取回数据。我能够取回数据，但是如果用户单击结果控制台日志，那么将触发两次而不是一次。任何想法如何克服这个？ 谢谢
这是我的设置。
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="text" name="search" value=1 id="search">
<button type="button" name="button" id="startSearch">Search</button>
<table id="results"></table>
<script type="text/javascript">
let searchString = document.getElementById('search')
let resultDiv = document.getElementById('results')
fetch('https://jsonplaceholder.typicode.com/users/'+searchString.value)
.then(response => response.json())
.then(json => {
resultDiv.innerHTML = ''
let tr = document.createElement('tr')
let td = document.createElement('td')
let text = document.createTextNode(json.name)
td.appendChild(text)
tr.appendChild(td)
resultDiv.appendChild(tr)
})
resultDiv.addEventListener('click',(e) => {
console.log('click1')
console.log(e.target.innerText)
})
</script>
</body>
</html>
what I have also tried is this
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="text" name="search" value=1 id="search">
<button type="button" name="button" id="startSearch">Search</button>
<table id="results"></table>
<script type="text/javascript">
let searchString = document.getElementById('search')
let resultDiv = document.getElementById('results')
fetch('https://jsonplaceholder.typicode.com/users/'+searchString.value)
.then(response => response.json())
.then(json => {
resultDiv.innerHTML = ''
let tr = document.createElement('tr')
let td = document.createElement('td')
let text = document.createTextNode(json.name)
td.appendChild(text)
tr.appendChild(td)
resultDiv.appendChild(tr)
})
resultDiv.addEventListener('click',(e) => {
console.log(e.target)
})
searchString.addEventListener('input',(e) => {
fetch('https://jsonplaceholder.typicode.com/users/'+searchString.value)
.then(response => response.json())
.then(json => {
resultDiv.innerHTML = ''
let tr = document.createElement('tr')
let td = document.createElement('td')
let text = document.createTextNode(json.name)
td.appendChild(text)
tr.appendChild(td)
resultDiv.appendChild(tr)
})
})
resultDiv.addEventListener('click',(e) => {
console.log(e.target)
})
</script>
</body>
</html>
，但是当我单击td元素时，它得到了两次，这对我很清楚。因此，我的问题是，我能否以某种方式在页面加载和输入事件侦听器上使用单个获取请求