jquery - 要素を別の要素に追加する

Question

<div>子要素を使用して動的に構築しています。子要素の 1 つは、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();
};