1

当用户打开一个页面时，我有一个简单的 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 ... 响应页面加载后添加到文档的元素的单击事件...但没有一个对我有用。图像将成功加载

如何让 jQuery “看到”这些新图像的数据属性？

4

1 回答 1

3

听起来你应该使用委托，但我会说你做错了。应该是这个样子...

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

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

于 2013-11-11T00:18:57.423 回答