Question

I want to dynamically create an element, then append it to the DOM and then load some content in there.
It works the second time I click on the button, but the first time it wont load the request.
What am I missing?

$('.unfold').click(function(){

    var areaName = 'event-preview';
    var objectDetailsArea = $('#'+areaName); 

    if (objectDetailsArea.length == 0)  { 

        var detailsArea = $("<section/>")
        .attr("id", areaName) 
        .addClass("column-third left");
        $('.content').append(detailsArea)
        loadArea(objectDetailsArea,'THEURL.html');          


    } else {
        loadArea(objectDetailsArea,'THEURL.html');
    }


    function loadArea(divName,pageURL) {
        divName.load(pageURL).hide().fadeIn();      
    }

});

Answer 1

Because when you click the first time you load content to non existing element objectDetailsArea.

$('.unfold').click(function() {
    var areaName = 'event-preview';
    var objectDetailsArea = $('#' + areaName);

    if (objectDetailsArea.length == 0) {
        var detailsArea = $("<section/>").attr("id", areaName)
            .addClass("column-third left");

        $('.content').append(detailsArea)
        loadArea(detailsArea, 'THEURL.html');  // <-- use "detailsArea"
                                               // instead of "objectDetailsArea"
    } else {
        loadArea(objectDetailsArea, 'THEURL.html');
    }

    function loadArea(divName, pageURL) {
        divName.load(pageURL).hide().fadeIn();
    }
});​