Создайте html, добавьте затем загрузку

Question

Я хочу динамически создать элемент, а затем добавить его в DOM, а затем загрузить там какой-то контент. Он работает во второй раз, когда я нажимаю кнопку, но в первый раз он не загрузит запрос. Что мне не хватает?

$('.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

Потому что при нажатии на первый раз при загрузке контента на несуществующий элемент 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(); 
    } 
});​