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