Javascript JQuery变量在第一次单击时未定义，但在第二次单击后定义

我试图使用ajax调用数据，但我只在第二次单击后获取数据。我添加了console.log来实现这一点

$(document).ready(function(){

    var target = "http://neoldes/cs/Satellite?pagename=SiteEntry_LT_EM/ConsumptionStatistics/ConsumptionPerHour";
    var component;

    $("header.mod_info_top").on("click", function() {
        $(this).siblings(".cs_consumption_hour").empty();
        loadConsPerHour( target ).success(function (data) {
            component = data;
        });
        console.log("component");
        console.log(component);
        $(this).next().append(component);
    });

});

function loadConsPerHour( dir ){
    return $.ajax({
        url: dir,
        data: { "accountNumber": $("#count_id").val(),"addressService": $("#addressService").val(), "department": $("#department").val(), "municipality": $("#municipality").val(), "borderTrade": $("#borderTrade").val() }
    });
}  

这是控制台中的retun 冷杉点击：

component
undefined

第二次点击：

component
<div id="component"> ... { more html } ...</div> 

---

请提前感谢，并告诉我是否可以改进代码。

尝试将追加代码移到成功回调的内部

$("header.mod_info_top").on("click", function() {
    $(this).siblings(".cs_consumption_hour").empty();
    loadConsPerHour( target ).success(function (data) {
        component = data;
        console.log("component");
        console.log(component);
        $(this).next().append(component);
    });
});

---

这是因为console.log函数是在AJAX完成之前执行的。 完成AJAX后，您必须调用console.log，如下所示：

$(document).ready(function(){

    var target = "http://neoldes/cs/Satellite?pagename=SiteEntry_LT_EM/ConsumptionStatistics/ConsumptionPerHour";
    var component;

    $("header.mod_info_top").on("click", function() {
        var targetElement = $(this);
        $(this).siblings(".cs_consumption_hour").empty();
        loadConsPerHour( target ).success(function (data) {
            component = data;
            console.log("component");
            console.log(component);
            targetElement.next().append(component);
        });
    });

});

function loadConsPerHour( dir ){
    return $.ajax({
        url: dir,
        data: { "accountNumber": $("#count_id").val(),"addressService": $("#addressService").val(), "department": $("#department").val(), "municipality": $("#municipality").val(), "borderTrade": $("#borderTrade").val() }
    });
}

它将记录：

component
<div id="component"> ... { more html } ...</div> 

---

Ajax操作是异步的。这样一来，它在第一次正确地记录日志，但从不追加数据。可能函数中的对象$this不同？我需要将数据附加到$header.mod_info_top中，但如果我移动$this.next.appendcomponent；在loadConsPerHour内部，什么都没有发生。现在我想设置附加数据的动画，所以我正在执行targetElement.next.appendcomponent.slideDownslow；但是动画没有出现。原因是什么？你能发布一个JSFIDLE吗？