Question

我有js个文件，其中包含一个$(document).ready..块。由于这个块里面有很多匿名函数，我决定移动它们并创建函数。问题是，当我将匿名函数更改为函数时，js停止正常工作。

在这种情况下，我尝试创建destination_from_0_changed函数以避免匿名。

例如：

之前（工作）

$(document).ready(function () {
    var destination_from_0 = $("#id_form-0-destination_from");
    var destination_to_0 = $('#id_form-0-destination_to');
    destination_from_0.on('change', function () {
        var destination_id = $(this).val();
        if (destination_id==''){
            return;
        }
        var ajax_loading_image = $('#ajax-loading-image');
        destination_to_0.empty();
        ajax_loading_image.show();
        $.ajax({
            url: '/ajax/get-destination-to-options/' + destination_id + '/',
            success: function (data) {
                ajax_loading_image.hide();
                destination_to_0.append('<option value="" selected="selected">'+"---------" + '</option>');
                $.each(data, function (key, value) {
                    destination_to_0.append('<option value="' + key + '">' + value + '</option>');
                });
                destination_to_0.change();
            }
        })
    });

现在：（没有工作）

$(document).ready(function () {
    var destination_from_0 = $("#id_form-0-destination_from");
    var destination_to_0 = $('#id_form-0-destination_to');
    destination_from_0.on('change', function(){
        destination_from_0_changed(destination_to_0);
    });

function destination_from_0_changed(destination_to_0){
    var destination_id = $(this).val();
        if (destination_id==''){
            return;
        }
        var ajax_loading_image = $('#ajax-loading-image');
        destination_to_0.empty();
        ajax_loading_image.show();
        $.ajax({
            url: '/ajax/get-destination-to-options/' + destination_id + '/',
            success: function (data) {
                ajax_loading_image.hide();
                destination_to_0.append('<option value="" selected="selected">'+"---------" + '</option>');
                $.each(data, function (key, value) {
                    destination_to_0.append('<option value="' + key + '">' + value + '</option>');
                });
                destination_to_0.change();
            }
        })
}

你们知道问题出在哪里吗？

Answer 1

实现的问题是当前元素上下文this不引用调用该事件的元素。

您可以使用bind()

bind()方法创建一个新函数，在调用时，将其this关键字设置为提供的值，并在调用新函数时提供任何前面提供的给定参数序列。

代码的

destination_from_0.on('change', function(){
    destination_from_0_changed.bind(this)(destination_to_0);
});

或者，您可以使用.call()

call()方法调用具有给定this值的函数和单独提供的参数。

destination_from_0.on('change', function(){
    destination_from_0_changed.call(this, destination_to_0);
});

Answer 2

如果您想完全摆脱匿名功能，可以将代码更改为

destination_from_0.on('change', destination_from_0_changed.bind(destination_from_0, destination_to_0));

将匿名函数转换为命名函数的JQuery无法正常工作

2 个答案: