Question

我有一个脚本，它通过AJAX获取图像，然后在名为#media-area的div中显示在页面上，该文件具有固定的高度和overflow: scroll;。有了这个，用户可以选择图像。在某些页面上，图像已被选中。在这种情况下，我希望div滚动，以便所选图像位于顶部。

$.ajax({
    url: 'index.php?c=media&m=media_ajax',
    success: function (res) {
        for (var index in res) {
            var me = res[index];

            var html = '<div class="col-md-3"><input type="radio" name="medialibrary" id="medialibrary' + me.id + '" value="' + me.id + '">';
            html += '<label for="medialibrary' + me.id + '">';
            html += '<img src="/image.php?image=' + me.image + '&thumbnail=122,122" alt="' + me.name + '" id="img_medialibrary' + me.id + '" width="122" height="122">';
            html += '</a>';
            html += '</div>';

            $("#media-area").append(html);

            $("#medialibrary" + me.id).change(function () {
                window.selected = $(this).val();
                $("#ml_selected").val($(this).val());
                $("#clear-selection").removeAttr('disabled');
                $("#upload").hide();
            });

            if ($("#ml_selected").val() == me.id) {
                $("#clear-selection").removeAttr('disabled');
                $("#upload").hide();
                $("#medialibrary" + me.id).attr('checked', 'checked');
            }
        }

        $('#media-area input').each(function () {
            var radioInput = $(this);
            if (radioInput.is(':checked')) {
                var radioIMG = $("#img_" + radioInput.attr('id'));
                $('#media-area').animate({
                    scrollTop: radioIMG.offset().top
                }, 2000);

            }
        });

    }
});

我可以让div滚动，但它不会在所选div附近。我猜这是因为在触发滚动事件时图像没有完全加载。在通过AJAX加载所有图像后，我将如何运行此事件以滚动到所选项目？

使用jQuery滚动显示通过AJAX加载的元素

0 个答案: