Question

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

Answer 1

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

试试这个：

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

giphyDiv.appendChild(giphyImage);

修改

获得相同结果的更好方法是使用event delegation。

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

使用纯JavaScript的示例：

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

body.addEventListener('click', function(event) {
  if (event.target.tagName === 'IMG')
    youFunctionHere();
})

我在哪里可以添加第二个针对var“giphyImage”的点击功能？

:: edit ::能够通过定位'img'而不是'giphyImage'来修复

1 个答案:

修改