Question

我有以下代码：

<?php
define('IN_PHPBB', true);
$phpbb_root_path = './phpBB3/';
$phpEx = substr(strrchr(__FILE__, '.'), 1);
include($phpbb_root_path . 'common.' . $phpEx);
// Start session management
$user->session_begin();
$auth->acl($user->data);
$user->setup();
?>

但是当我点击其中一张图片时，日志中没有打印出任何内容。谁能帮助我并解释我做错了什么？

编辑：

我通过添加这个来解决它：

   $('#spotifyAlbum').click(function () {
             var albums = {};
             $.ajax({
                 url: 'https://api.spotify.com/v1/me/albums',
                 headers: {
                     'Authorization': 'Bearer ' + token
                 },
                 success: function (response) {
                     $('#testSpotifyAlbumsContainer').show();
                     for(var i = 0; i < response.total; i++)
                     {
                         $('#testSpotifyAlbums').append("<img src='" + response.items[i].album.images[0].url + "' uri='" + response.items[i].album.uri + "' class='spotifyAlbum'>");

                     }

                 },
                 error: function (response) {
                     console.log(response);
                 }
             });
         });

   $('.spotifyAlbum').click(function () {
         console.log("hej");
     });

Answer 1

标准jQuery选择器（如您使用的那个$('.spotifyAlbum').click()仅适用于页面加载时DOM中存在的元素。如果您通过AJAX请求创建新的DOM元素，则此单击事件侦听器将不会注意到这些元素，也不会处理对它们的点击。

jQuery中有针对此案例的解决方法。版本 1.7 之前有.live()方法， 1.7 + 使用$(document).on('click', '.spotifyAlbum', function() {});此选择器会继续收听整个文档的所有点击，但会仅触发那些在.spotifyAlbum类的元素上生成的内容。

这将有效：

$('#spotifyAlbum').click(function () {
    var albums = {};
    $.ajax({
        url: 'https://api.spotify.com/v1/me/albums',
        headers: {
            'Authorization': 'Bearer ' + token
        },
        success: function (response) {
            $('#testSpotifyAlbumsContainer').show();
            for(var i = 0; i < response.total; i++) {
                $('#testSpotifyAlbums').append("<img src='" + response.items[i].album.images[0].url + "' uri='" + response.items[i].album.uri + "' class='spotifyAlbum'>");
            }
        },
        error: function (response) {
            console.log(response);
        }
    });
});

$(document).on('click', '.spotifyAlbum', function () {
    console.log("hej");
});

Answer 2

我知道你已经解决了它，但只是为你的理解提供了解释。我没有足够的声誉将其添加为评论。

它之前没有用，因为你试图将事件处理程序附加到未来的元素，那些在附件时不存在但在ajax调用之后添加的元素。

您也可以通过将事件处理程序附加到文档本身而不是原始代码中的实际元素来解决它。

$(document).on("click",".spotifyAlbum",function(){
    console.log("Hey");
})

也应该有效。有关jQuery on方法here的更多信息。

在追加jquery后检测图像点击

2 个答案: