将匿名函数转换为命名函数的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();
}
})
}
你们是否知道问题出在哪里?
问题与你的实现是当前元素上下文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);
});
或者你可以使用.call来避免那个讨厌的语法 –
@JaromandaX,正在更新:) – Satpal
,如果你想获得完全摆脱匿名函数,您可以更改代码
destination_from_0.on('change', destination_from_0_changed.bind(destination_from_0, destination_to_0));
你'this'已经改变了......你还没有得到无论如何摆脱匿名函数 –