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