所以我目前正在使用jquery为omdb-api创建一个搜索应用程序。现在，我已经设置了搜索栏，以便在用户输入电影标题时动态更新搜索结果。目前，我遇到了两个问题，我需要一些关于如何解决它们的建议。第一个问题是，每当我开始输入一部电影时，有时这部电影会生成两次，当我按下空格键时，它会生成前一部电影的另一个结果。例如，如果我想搜索电影《虎胆龙威》，当我输入第一个字母D时，它就会返回两次坚韧的D和命运的选择，然后当我输入完单词Die时，其印刷了3次Die Hard。我的另一个问题是，当在搜索栏中输入数据时，我会在上动态生成一个按钮。然而，我有一个点击事件，用该按钮设置to id，控制台日志为"；作品"；上，但按钮不起作用，我无法让它登录"；作品
下面列出了我的代码以及到已部署站点的链接，这样您就可以看到正在进行的搜索区域以及生成的按钮。https://oballematt.github.io/Shoppies/
如有任何建议，我们将不胜感激！谢谢
$(document).ready( () => {
$(".search").on("keyup", () =>{
const search = $(".search").val()
const queryUrl = " https://www.omdbapi.com/?t=" + search + "&apikey="
$.ajax({
url: queryUrl,
method: "GET"
}).then(response => {
console.log(response)
$("#movie-title").text(`Results for "${search}"`)
$("#results").append("<ul id='resultsList'>")
$("#resultsList").append(`<li>${response.Title} (${response.Year}) <button id='nominate'>Nominate</button>`)
if (response.Response === "False") {
$("#resultsList").text("")
}
});
});
$("#nominate").on("click", () => {
console.log("works")
})
})
您获得多个结果的原因是因为您每次都绑定API返回的结果。API将使用不同的输入返回相同的结果(例如，D将导致Die Hard，Die也将导致(。为了避免这种情况，您需要检查API是否针对记录返回任何唯一密钥(在本例中为其imdbID(，并使用它来检查它是否已经在要跳过的列表中。
但我不确定你为什么不在API中使用s参数来直接返回记录列表
关于按钮点击，这是因为您正在动态创建DOM，所以新创建的按钮不会监听您的点击事件。为了解决这个问题，您需要在每次创建DOM时添加事件。
如果你使用s参数，你的代码应该看起来像(如果有太多的结果，它不会搜索(-
const apiKey = '*******';
$(document).ready(() => {
$(".search").on("keyup", (e) => {
e.preventDefault()
const search = $(".search").val();
const queryUrl = " https://www.omdbapi.com/?s=" + search + "&apikey=" + apiKey;
$.ajax({
url: queryUrl,
method: "GET"
}).then(response => {
$("#movie-title").text(`Results for "${search}"`);
$("#results").html("");
if (!response.Search || response.Response === "False") {
return;
} else {
const $ul = $("#results").append("<ul");
for (var item of response.Search) {
$ul.append(`<li>${item.Title} (${item.Year}) <button>Nominate</button>`);
}
$ul.find('li').on('click', () => {
console.log("works");
});
}
});
});
})body {
background-color: gray;
}
.container {
margin-top: 15%;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
<title>The Shoppies</title>
</head>
<body>
<div class="container">
<h1>The Shoppies</h1>
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-body">
<h5 class="card-title">Movie Title</h5>
<div class="input-group mb-3">
<span class="input-group-text"><i class="bi bi-search"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"></path>
</svg></i></span>
<input type="text" class="form-control search" aria-label="Username" aria-describedby="basic-addon1">
</div>
</div>
</div>
</div>
</div>
<div class="row mt-3">
<div class="col-md-6">
<div class="card">
<div id="movie-title" class="card-body"></div>
<div id="results"></div>
</div>
</div>
<div class="col-md-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Nominations</h5>
</div>
</div>
</div>
</div>
</div>
</body>