Welcome toVigges Developer Community-Open, Learning,Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
515 views
in Technique[技术] by (71.8m points)

javascript - jQuery keyup event rendering same input twice. Generated button not responding to on click event

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")
    })

})

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

Please log in or register to answer this question.

Welcome to Vigges Developer Community for programmer and developer-Open, Learning and Share
...