JQuery преобразование анонимной функции в именованную функцию не работает правильно

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() создает новую функцию, которая при вызове, имеет это свое ключевое слово, установленное на основе предоставленного значение, с заданной последовательностью рассуждений, предшествовавших любой при условии, когда новая функция называется.

Код

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