创建html，追加然后加载答案

【问题标题】：Create html, append then load创建html，追加然后加载
【发布时间】：2012-06-30 18:59:44
【问题描述】：

我想动态创建一个元素，然后将其附加到 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();      
    }

});

【问题讨论】：

标签： jquery load append

【解决方案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();
    }
});

【讨论】：