在 jquery 中调用 AJAX 后更新变量

Question

我想创建一个页面，无论用户是否在（Django ModelChoice）表单上进行选择，然后这会导致另一个表单的 Ajax 更新，这可能会触发额外的 Ajax 更新。我相当基本的 javascript 技能无法胜任这项任务！

问题是我无法正确读取更新表单的值 - 它总是比我认为应该的位置落后一步。在下面的简化示例中，就好像 Jquery 在计算 first_var 的同时计算 second_var 的值（即在我使用 Ajax 调用更新它之前）。如果我在#id_first_metric 中的两个选项之间不断切换，second_var 将更新，但它始终指向上次更新之前的#id_second_metric 的值。

如何让 second_var 正确包含其新更新的值？

function first_function(first_var){
    console.log('first var:' + first_var);
    //    correctly states the value of first var
    var update_url = '/ajax/update_second_metric/first_var';
    $('#id_second_metric').load(update_url);

$('#first_metric_selector').change(function () {
    var first_var = $('#id_first_metric').val();
    first_function(first_var);
    $('#second_metric_selector').change();
});

$('#second_metric_selector').change(function () {
    var second_var = $('#id_second_metric').val();
    console.log('second var' + second_var);
    //  fails to detect the new value of second var created by the first
    //  AJAX call
});

回答

function first_function(first_var){
    console.log('first var:' + first_var);
    //    correctly states the value of first var
    var update_url = '/ajax/update_second_metric/';
    $('#id_second_metric').load(update_url, function(){
        $('#second_metric_selector').change();
    });

Answer 1

"$('#id_second_metric').load(update_url)" 异步发生。不能保证在“$('#id_second_metric').load(update_url)”完成之前会调用“$('#second_metric_selector').change()”。

您可以使用 load 提供的回调函数来保证顺序。见http://api.jquery.com/load/