Question

我正在使用子元素动态构建<div>。其中一个子元素是我需要有一个load事件的图像。当我尝试.appendTo() <div>时，图片未被追加。我可以在firebug中看到每个元素（contentItem和$img）都存在但没有附加。

var buildContentItem = function (src, caption, date, userName) {
    var contentItem =
        '<div class="contentItem">' +
            '<a href="javascript: void(0);"></a>' +
            '<div class="detailsWrapper">' +
                '<span class="date">' + date + ': </span>' +
                '<span class="userName">' + userName + '</span>' +
                '<div class="caption">' + caption + '</div>' +
            '</div>' +
        '</div>';

    var $img = $('<img>', {
        load: function () {
            console.log('loaded');
            images.push($.Deferred(function (promise) {
                promise.resolve();
            }).promise());
        }
    }).appendTo($(contentItem).find('a'));
    $img.attr('src', src).attr('alt', caption);

    return contentItem;
};

Answer 1

我正在返回contentItem，它只是一个字符串。当我将$img附加到$(contentItem)时，它没有对字符串进行更改。这是修复......

var buildContentItem = function (src, caption, date, userName) {
    var contentItem =
        '<div class="contentItem">' +
            '<a href="javascript: void(0);"></a>' +
            '<div class="detailsWrapper">' +
                '<span class="date">' + date + ': </span>' +
                '<span class="userName">' + userName + '</span>' +
                '<div class="caption">' + caption + '</div>' +
            '</div>' +
        '</div>';

    var $img = $('<img>', {
        load: function () {
            console.log($(this).position().left);
            images.push($.Deferred(function (promise) {
                promise.resolve();
            }).promise());
        }
    });
    // the fix below
    contentItem = $(contentItem).find('a').append($img).parent();
    $img.attr('src', src).attr('alt', caption);

    return $('<div>').append(contentItem.clone()).html();
};

将元素附加到另一个元素

1 个答案: