javascript - JQuery 事件正在被另一个事件取代

Question

我有一个表格，它实际上由两个表格组成。每个表格都是一个预订表格。两种形式都有两个下拉列表 - destination from 和 destination to。有一个偶数处理程序，它调用 AJAX 以在选择/更改目的地时获取可能的目的地。

另一个事件处理程序(往返复选框)通过从第一个表单切换目的地来填充第二个表单下拉列表。

所以如果第一个表单有:

destination one: France
destination two: Austria

然后，如果选中round trip，则立即填写第二个表单:

destination one: Austria
destination two: France 

问题是这两个事件不能正确配合。

当这段代码被执行时:

id_form_1_destination_from.val(destination_to_0.val());
id_form_1_destination_to.val(destination_from_0.val());
id_form_1_destination_from.change();
id_form_1_destination_to.change();

第一行调用另一个填充第二个表单的处理程序(这是唯一不需要的情况)。由于它是 AJAX，第二行取代了此 AJAX，所以现在，第二个表单已正确填写(从第一个表单切换目的地)，但是当 AJAX 完成时，它会改变目的地二字段的选择。

有没有办法避免这种情况？例如关闭事件处理程序或更好地让 JQuery 等待 AJAX 完成然后继续。我不能只在 destination to 字段上执行 .off()，因为我使用 select2 插件。

这是我的JQuery:

$(document).ready(function () {
    var destination_from_0 = $("#id_form-0-destination_from");
    var destination_to_0 = $('#id_form-0-destination_to');
    var ride_two = $('#ride_two');

    $('.class-destination-from').on('change', function () {
        destination_from_changed.call(this);
    });

    $("#id_round_trip").on('change', function () {

        if (($('#id_round_trip').is(':checked')) ) {

            var id_form_1_destination_from =$('#id_form-1-destination_from');
            var id_form_1_destination_to = $('#id_form-1-destination_to');

            ride_two.show('fast');

            //id_form_1_destination_from.off();
            id_form_1_destination_from.val(destination_to_0.val()).change();
            //id_form_1_destination_from.on();
            //id_form_1_destination_from.change();
           id_form_1_destination_to.val(destination_from_0.val()).change();


        }else{
            ride_two.hide('fast');
            ride_two.find(':input').not(':button, :submit, :reset, :checkbox, :radio').val('').change();
            ride_two.find(':checkbox, :radio').prop('checked', false).change();
        }
    });
    $('.class-destination-to').on('change', destination_to_changed);



});

function destination_to_changed() {
    var destination_id = $(this).val();
    var arrival_container = $(this).siblings('.arrival-container');
    var departure_container = $(this).siblings('.departure-container');

    if (destination_id == '') {
        return;
    }
    $.ajax({
        url: '/ajax/is-airport/' + destination_id + '/',
        success: function (data) {
            if (data.status == true) {
                arrival_container.hide("slow");
                departure_container.show("slow");

            }
            if (data.status == false) {

                departure_container.hide("slow");
                arrival_container.show("slow");
            }
            arrival_container.change();
            departure_container.change();
        }
    })
}

function destination_from_changed() {
    var destination_id = $(this).val();
    if (destination_id == '') {
        return;
    }
    var ajax_loading_image = $('#ajax-loading-image');
    var destination_to = $(this).siblings('.class-destination-to');
    destination_to.empty();
    ajax_loading_image.show();
    $.ajax({
        url: '/ajax/get-destination-to-options/' + destination_id + '/',
        async:false, // ADDED NOW - THIS HELPED BUT IT'S NOT NECESSARY EVERYTIME
        success: function (data) {
            ajax_loading_image.hide();
            destination_to.append('<option value="" selected="selected">' + "---------" + '</option>');
            $.each(data, function (key, value) {
                destination_to.append('<option value="' + key + '">' + value + '</option>');
            });
            destination_to.change();
        }
    })
}

Answer 1

如果我没理解错的话，你遇到了并发问题。您基本上希望在调用第二个 ajax 调用之前终止您的第一个 ajax 调用，对吗？

我在您的代码中没有看到任何 ajax 请求，但我认为参数 async: false, 可能是您所需要的。

查看文档:http://api.jquery.com/jquery.ajax/

希望对你有帮助