Javascript .on（“单击”）不附加到HTML

我正在制作一个gif生成器，目标是动态创建可点击的按钮，然后将搜索词中的10个gif动态添加到页面中。单击返回控制台日志，但不会向页面添加带有gif图像和分级的div

HTML

添加连环杀手：

JS

var killersGifs={
杀手搜索：[“弗雷迪”、“杰森”、“彭尼维斯”、“鬼脸”、“美国玛丽”、“楚奇”、“楚奇的新娘”、“坎迪曼”、“库乔”、“汉尼拔”、“皮革脸”、“迈克尔·迈尔斯”、“诺曼·贝茨”、“针头”]，
buttonLoop:function（）{
for（var b=0；b

点击一个按钮应该返回10个与该单词相关的图像（仍然是GIF）

---

console.log

在单击时运行，但它是控制台记录所有13个单词的10个数组，而不是单击单词的一个数组。

响应

是一个对象

响应。长度是未定义的

响应。数据是一个数组

如果还需要图像，则还应附加
killerImg


var killersGifs={
杀手搜索：[“弗雷迪”、“杰森”、“彭尼维斯”、“鬼脸”、“美国玛丽”、“楚奇”、“楚奇的新娘”、“坎迪曼”、“库乔”、“汉尼拔”、“皮革脸”、“迈克尔·迈尔斯”、“诺曼·贝茨”、“针头”]，
buttonLoop:function（）{
for（var b=0；b
添加连环杀手：


Hi，您遇到了什么错误？在console.console.log（response）中登录时没有错误；可以上载此数据或pic-这是我单击Chucky时的响应-抱歉，我刚收到您的请求。只需秒更改
var respData=response.data；
到
var respData=response[x].data；
因此，您将不会多次使用相同的数据执行相同的操作，而这些数据是在页面上获取的。谢谢！这是错误的
dynDiv.append（图像）；
使用这个
dynDiv.append.append（killerImg）；
@ColinCline，我不知道她为什么要这样做。我几秒钟前就完全注意到了>_
<form id="killer-form">
    <label for="killer-input">Add a serial killer:</label>
    <input type="text" id="killer-input"><br>
    <input id="killer-add-submit" type="submit" value="Submit">
</form>

<div id="append-img-div"></div>

var killersGifs = {

    killerSearches: ["Freddy", "Jason", "Pennywise", "Ghost Face", "American Mary", "Chucky", "Bride of Chucky", "Candyman", "Cujo", "Hannibal", "Leatherface", "Michael Meyers", "Norman Bates", "Pinhead"],

    buttonLoop: function() {
        for (var b = 0; b < killersGifs.killerSearches.length - 1; b++) {
            var buttonM = $("<button class='dynGen'>").text(killersGifs.killerSearches[b]).attr("data-index", killersGifs.killerSearches[b]);
            $("#buttons").append(buttonM);
        }
    },

    divLoop: function(event) {
        for (var i = 0; i < killersGifs.killerSearches.length - 1; i++) {
            //console.log(this.killerSearches[i]);
            //var newDiv = $("<div class='gif-div'>");
            var killer = killersGifs.killerSearches[i];
            var queryURL = "https://api.giphy.com/v1/gifs/search?api_key=B26sstJns2pZuNT5HiJpqS5FV8Su1sDd&q=" + killer + "&limit=10"


            //console.log(queryURL);
            $.ajax({
                url: queryURL,
                method: "GET"
            }).done(function(response) {
              console.log(response);
                for (var x = 0; x < response.length - 1; x++) {

                    var respData = response[x].data;
                    var image = respData.images.fixed_height_small_still.url;
                    var rating = respData.rating;

                    var dynDiv = $("<div class='dyn-div'>");
                    var killerImg = $("<img>");

                    killerImg.attr("src", image);
                    killerImg.attr("alt", "Serial Killer still frame of gif");

                    dynDiv.append("Rating: " + rating);
                    dynDiv.append(image);


                    $("#append-img-div").prepend(dynDiv);

                };

            });

        };
    },

    userPush: function () {
        var userInput = $("input[type='text']").val().trim();
        console.log(userInput);
        killersGifs.killerSearches.push(userInput);
        var buttonU = $("<button class='dynGen'>").text(userInput).attr("data-index", userInput);
        $("#buttons").append(buttonU);
        console.log(killersGifs.killerSearches);
    }

};

killersGifs.buttonLoop();

$("#killer-add-submit").on("click", function(event) {
    event.preventDefault();
    killersGifs.userPush();
   });

$(document).on("click", "button.dynGen", function(event) {
    event.preventDefault();
    $("#append-img-div").empty();
    killersGifs.divLoop(event);
});