将匿名函数转换为命名函数的JQuery不能正常工作

我有一个js文件，其中一个$(document).ready..块。由于这个块内有很多匿名函数，我决定移动它们并创建函数。问题在于，当我将匿名函数更改为函数时，js停止正常工作。将匿名函数转换为命名函数的JQuery不能正常工作

在这种情况下，我试图创建一个destination_from_0_changed函数来避免匿名。

例如：

BEFORE（作品）

$(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(); 
      } 
     }) 
    });

NOW：（不工作）

$(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(); 
      } 
     }) 
}

你们是否知道问题出在哪里？

来源

2016-08-02 Milano Slesarik

你'this'已经改变了......你还没有得到无论如何摆脱匿名函数 –

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

您可以使用bind()

的bind()方法创建一个新的函数，调用它时，有该关键字设置为所提供的价值，与前当新的功能是任何提供的参数给定的顺序调用。

代码

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); 
});

来源

2016-08-02 09:16:19 Satpal

或者你可以使用.call来避免那个讨厌的语法 –

@JaromandaX，正在更新:) – Satpal

，如果你想获得完全摆脱匿名函数，您可以更改代码

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

来源

2016-08-02 09:25:17

将匿名函数转换为命名函数的JQuery不能正常工作

回答

相关问题