javascript - jQuery加载AJAX图片属性不能为 "seen"

Question

当用户打开页面时，我有一个简单的 AJAX 调用开始在后台加载图像:

$('.image-container').load('/images/portfolio/');

这会加载每个图像的副本，一个小的和一个大的，例如:

<img src='...' class='small-image' data-picnum='0' style='height:100px; width:100px; opacity:1;'>
<img src='...' class='big-image' data-picnum='0' style='height:400px; width:400px; opacity:0;'>

当点击小图时，我使用 jQuery 检索它的“data-picnum”属性，然后找到对应的大图并使其可见:

var picNum = $(this).data('picnum');
$('.big-image[data-picnum="'+picNum+'"]').fadeIn();

但是，当使用 AJAX 加载图像时，jQuery 无法读取“data-picnum”属性。我用以下方法测试过:

alert($(this).data('picnum');)

弹出窗口只显示“未定义”。我也尝试按照这篇文章中的描述执行 .live()、.on() 和 .delegate ... Responding to click event of element added to document after page load ...但没有一个对我有用。图片将加载成功

我怎样才能让 jQuery“看到”这些新图像的数据属性？

Answer 1

听起来您应该使用委托(delegate)，但我认为您做错了。应该看起来像这样......

$(document).on('click', '.small-image[data-picnum]', function(e) {
    var picNum = $(this).data('picnum');
    $('.big-image[data-picnum="' + picNum + '"]').fadeIn();
});

您可以将上面的 document 替换为任何不会被动态插入或替换(例如通过 AJAX)的有效父容器。