我尝试过:在for
循环内部,在.done
函数内部但在循环外部,以及函数结束for
之前和之后。button
我希望能够在单击giphyImage
.
下面是我试图插入某处以获得第二次点击并在控制台中对其进行测试的代码,但控制台中根本没有显示任何内容。
$('giphyImage').on('click', function() {
console.log('testclickedimage')
});
这是我的 HTML:
<!-- language: lang-html -->
<!DOCTYPE html>
<html>
<head>
<!--Megatags-->
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Title on browser tab-->
<title>Bradley's Giphy API App</title>
<!--Reset tag-->
<link rel="stylesheet" href="assets/css/reset.css">
<!--Bootstrap tag-->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!--Css tag (after bootstrap)-->
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<div class="container">
<div class="buttons">
<button data-giphy="cat">Cats</button>
<button data-giphy="dog">Dogs</button>
<button data-giphy="bird">Birds</button>
<button data-giphy="horse">Horses</button>
<button data-giphy="parrots">Parrots</button>
<button data-giphy="jason schwartzman">Jason Schwartzman</button>
<button data-giphy="zooey deschanel">Zooey Deschanel</button>
<button data-giphy="michael cera">Michael Cera</button>
<button data-giphy="zach braff">Zach Braff</button>
<button data-giphy="natalie portman">Natalie Portman</button>
<button data-giphy="pizza">Pizza</button>
<button data-giphy="hamburger">Hamburger</button>
<button data-giphy="beer">Beer</button>
<button data-giphy="shrimp">Shimp</button>
<button data-giphy="lobster">Lobster</button>
</div>
<div class="addButtons"></div>
<div class="gifsAppearHere"></div>
</div>
<!--Jquery tag-->
<script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
<!--Javascript tag-->
<script src="assets/javascript/game.js"></script>
</body>
</html>
这是我的javascript代码:
$('button').on('click', function() {
var giphy = $(this).data('giphy');
var queryURL = "http://api.giphy.com/v1/gifs/search?q=" + giphy
+ "&api_key=dc6zaTOxFJmzC&limit=10";
//testing variable
console.log (queryURL);
$.ajax({
url: queryURL,
method: 'GET'
}).done(function(response) { //done function
//console logs results remove when done testing
console.log(response)
//pulls response from data key
var results = response.data
//loops though images randomly
for (var i = 0; i < results.length; i++) {
//creates Div
var giphyDiv = $('<div class="giphyDiv">');
//pulls ratings
var p = $('<p>').text('Ratings: ' + results[i].rating);
//creats images
var giphyImage = $('<img>');
//pulls images from API
giphyImage.attr('src', results[i].images.fixed_height.url);
//appends rating and image
giphyDiv.append(p);
giphyDiv.append(giphyImage);
//prepends to class specified in html
$('.gifsAppearHere').prepend(giphyDiv);
} //end of for loop
}); //end of done function
}); //end of button function
::edit:: 能够通过定位“img”而不是“giphyImage”来修复
$('img').on('click', function() {
console.log('testclickedimage')
});
现在控制台显示“testclickedimage”