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

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

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

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

使用AJAX加载的图像的属性不能被jQuery“看到”

1 个答案: