在AJAX调用时（）。然后（）

Question

我现在已经尝试阅读和理解promises，异步ajax调用和.when和.then。但是，我仍然遇到一些旧内容被更新和插入的问题。

所以如果我做错了或者有更好的方法，请告诉我。

我的代码：

// Loading template
function getTemplate(template) {
    return $.ajax({
        dataType: "json",
        url: "/externalBookingModule/jsonp_example.php?" + template + "&url=" + document.domain + "&callback=?",
        success: function(result){
            $("#template").html(result['template']);
            console.log(result['template']);
        }
    });
}

// Loading JSON content
function loadContent(content, div) {
    return $.ajax({
        dataType: "json",
        url: "/externalBookingModule/jsonp_example.php?" + content + "&url=" + document.domain + "&callback=?",
        success: function(result){
            var template = $('#template').html();
            Mustache.parse(template);   // optional, speeds up future uses
            var rendered = Mustache.render(template, result);
            $(div).html(rendered);
        }
    });
}

// buttons
$("#target").on("click", '.nextButton', function() { 
    $.when(
        getTemplate("templateCustomerInfo", "#template"))
    .then(
        loadContent("test1", "#target")
    );
});     
$("#target").on("click", "#searchDatesButton", function() {
    $.when(
        getTemplate("templateDates", "#template"))
    .then(
        loadContent("test1", "#searchContent")
    );
});

非常感谢！