如何解决单击图像后返回的“未定义”结果？

Question

以下内容从查询中捕获3个属性，其中一个属性为friendRequestId

query.find({
    success: function(results) {
        var friends = [];
        for (var i = 0; i < results.length; i++) {
            friends.push({
                imageURL: results[i].get('toUser').get('pic'),
                friendRequestId: results[i].id,
                username: results[i].get('toUser').get('username')
            });
        }

        for (var j = 0; j < friends.length; j++) {

            $('#container').append('<img class="images" src="' + friends[j].imageURL + '" data-friend-request-id="' + friends[j].friendRequestId + '" />');
            }

---

从查询中，用户通过

看到页面上显示的图像

<div class = "FriendSelected" id="container"></div>

---

当用户点击图片时，以下代码应捕获friendRequestId值并将其保存到变量friendRequestId

目前，＆＃34;未定义＆＃34;正在返回结果。我不确定这是因为我的代码有问题，还是按照屏幕截图，图像实际上是在div容器中保存的？不确定如何解决这个问题？

我确定我应该使用friendRequestId即使控制台日志将其作为data-friend-request-id返回？

以下是无效的代码

$(document).on("click",".FriendSelected",function(e){
    alert(e.source).data("friendRequestId");
    var friendRequestId = $(e.source).data("friendRequestId");
});

Answer 1

您需要在img标签而不是div标签类上添加的图像类上编写事件，并且您必须执行event delegation，因为在DOM加载后动态添加图像，您需要使用data()要获得friend-request-id值，您可以使用attr()这样的方法：

$("div.FriendSelected").on("click",".images",function(){


var friendId = $(this).data("friend-request-id");

// or alternate can be to use attr()

var friendId = $(this).attr("data-friend-request-id");

});

Answer 2

鉴于我一直在关注您的其他问题，这里是一个JSFiddle，以与您的其他代码相关的方式显示该概念：

http://jsfiddle.net/Kd4pS/3/

基本上，如果您将图像和名称输出包装在某种包装器中，则可以将“click”处理程序附加到容器，该处理程序将在包装器层捕获事件，如下所示：

$('#container').on('click', '.wrapper', function() {
    console.log(this);
    var wrapper = $(this);
    // either of these work
    console.log(wrapper.data('friendRequestId'));
    console.log(wrapper.data('friend-request-id'));
    // remove selected from all wrappers in case one was already selected
    $('#container .wrapper').removeClass('selected');
    // mark clicked wrapper as selected
    wrapper.addClass('selected');
    // save friendRequestId
    window.selectedFriendRequestId = wrapper.data('friendRequestId');
    // enabled button
    $('#simulateAddBadge').removeAttr('disabled');
});

在这种情况下，我使用最简单的方法将selectedFriendRequestId保存为window上的属性。

然后，您可以按照以下方式从其他代码访问此保存的值：

$('#simulateAddBadge').on('click', function() {
    alert('add badge for friend request: ' + window.selectedFriendRequestId);
});