Question

I am dynamically building a <div> with child elements. One of the child elements is an image that I need to have a load event for. When I’m trying to .appendTo() the <div> the image is not being appended. I can see in firebug that each element (contentItem and $img) exist but not being appended.

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

I was returning contentItem which was just a string. When I was appending $img to $(contentItem) it wasn’t making changes to the string. Here’s the fix…

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();
};