0

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

});

1 Answer 1

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.