.on ("click") HTML에 추가하지 않음

Question

나는 gif generator를 만들고 있는데, 동적으로 clickable 버튼을 만들어 동적으로 10 개의 gif를 페이지에 추가합니다. 클릭 할 때 콘솔 로그가 반환되지만 gif 이미지와 등급이 지정된 div가 페이지에 추가되지는 않습니다.

HTML

<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> 

JS

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

그 단어와 관련된 이미지 (10)를 돌려 버튼 (정지 된 GIF)을 클릭.

console.log은 클릭하면 실행되지만 클릭 한 단어에 대해 하나의 배열과 대조적으로 13 개의 모든 단어에 대해 10 개의 배열을 로깅합니다.

Answer 1

response은 개체입니다.

response.length은 정의되지 않았습니다.

response.data은 배열입니다.

이미지를 원하면 killerImg도 추가해야합니다.

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 queryURL = "https://api.giphy.com/v1/gifs/search?api_key=B26sstJns2pZuNT5HiJpqS5FV8Su1sDd&q=" + killer + "&limit=10" 
 

 
     var killer = killersGifs.killerSearches[i]; 
 
     //console.log(queryURL); 
 
     $.ajax({ 
 
     url: queryURL, 
 
     method: "GET" 
 
     }).done(function(response) { 
 
//   console.log(response.data.length); 
 
     for (var x = 0; x < response.data.length - 1; x++) { 
 
      var respData = response.data[x]; 
 
      var image = respData.images.fixed_height_small_still.url; 
 
      var rating = respData.rating; 
 

 
      var dynDiv = $("<div class='dyn-div'></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).append($(killerImg))); 
 

 
     }; 
 

 
     }); 
 

 
    }; 
 
    }, 
 

 
    userPush: function() { 
 
    var userInput = $("input[type='text']").val().trim(); 
 
    console.log(userInput); 
 
    killersGifs.killerSearches.push(userInput); 
 
    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); 
 
});

<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script> 
 

 
<div id="buttons"></div> 
 

 
<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>