0

我尝试过：在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”

4

1 回答 1

0

我认为您的问题是 giphyImage 是一个字符串而不是 DOM 元素。这就是为什么您不能将事件侦听器附加到它的原因。

尝试这个：

var giphyImage = document.createElement('img');
giphyImage.setAttribute('src', yourImageSource);
giphyImage.addEventListener('click', yourFunctionHere /* without () */);

giphyDiv.appendChild(giphyImage);

编辑

达到相同结果的更好方法是使用事件委托。

简而言之，您可以简单地将单个事件侦听器附加到父元素，而不是将一个事件侦听器附加到每个图像元素，该事件侦听器将触发所有符合某些条件（例如，类名）的子元素。更好的是，孩子是否已经存在或稍后添加都没有关系。

使用纯 JavaScript 的示例：

var body = document.querySelector('body');

body.addEventListener('click', function(event) {
  if (event.target.tagName === 'IMG')
    youFunctionHere();
})
于 2016-08-28T22:54:27.277 回答