So I'm currently creating a search app for omdb api using jquery. Right now I have the search bar set up to dynamically update the search results as the user enters in a movie title. Currently I have two problems that I'm stuck on could use some advice on how to fix them. The first problem is whenever I start typing in a movie, sometimes that movie is generated twice and when I press the spacebar, it generates another result of the one before it. For instance if I want to search for the movie Die Hard, When I type in the first letter D, it brings back Tenacious D and the Pick of Destiny twice and then when I finish typing out the word Die, its printed Die Hard 3 times. My other issue is I'm dynamically generating a button on the when data is entered in the search bar. However, I have an on click event set up the to id with that button with a console log of "works" on it, but the button doesnt work, I cant get it to log "works.
My code is listed down below as well as a link to the deployed site so you can see the search area in action as well as the generated button.
https://oballematt.github.io/Shoppies/
Any advice would be greatly appreciated! Thanks!
$(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")
})
})
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…