Изменение срабатывания и событие готовности в одной функции через jquery

Question

Я не хочу писать один и тот же код для изменений и готов. Так как же объединить оба события в одну функцию?

$('#c_country').ready(function(){                              
     var austaffinitycost=<%=affinityServerCostList.get(3) %>;   //getting the data from database
     if($('#c_country').val()=="Australia"){                     //c_country is a input filed
         $('#sl_cost').val(austaffinitycost);
     }
     else{
         $('#sl_cost').val("4");
     }
 }).trigger('change');                                          //firing the change event

Answer 1

Для дальнейшего пояснения моего комментария, функция .ready() на самом деле является специальной jQuery конструкцией , которая является полифилом / псевдонимом для события DOMContentLoaded, и, следовательно, полезна только при использовании в качестве например: $(document).ready(function() { ... }):

Метод .ready() предлагает способ запуска кода JavaScript, как только объектной моделью документа (DOM) страницы станет безопасно управлять.

Кроме того, хотя большинство людей все еще используют $(document).ready(function() { ... }), официальная документация рекомендует использовать вместо него $(function() { ... }).

---

Если вы хотите, чтобы logi c запускался одновременно, когда документ ready и когда #c_country запускает событие onchange, вы можете просто абстрагировать его в отдельную функцию. Затем вызовите эту функцию в DOM ready и в обработчике событий onchange отдельно:

function setCost() {
    var austaffinitycost = <%=affinityServerCostList.get(3) %>;
    if ($('#c_country').val() === 'Australia') {
        $('#sl_cost').val(austaffinitycost);
    } else {
        $('#sl_cost').val('4');
    }
}

 $(function() {
    $('#c_country').change(function() {
        setCost();
    });

    setCost();
 });

Некоторые подсказки:

• Всегда используйте ===, когда это возможно, это намного безопаснее
• Лично я бы не стал кодировать данные сервера так: var austaffinitycost = <%=affinityServerCostList.get(3) %>;. Если возможно, используйте асинхронный запрос для извлечения данных на стороне сервера

• Вы можете сократить оператор if / else с помощью тенарных операторов, то есть

  $('#sl_cost').val($('#c_country').val() === 'Australia' ? austaffinitycost : '4');
  

Answer 2

Я получил ответ, сославшись на другую ссылку на stackoverflow. Если у кого-то будет такая же проблема, он / она может обратиться к ней.

$('#c_country').on('ready change',function(e){
     var austaffinitycost=<%=affinityServerCostList.get(1) %>;
     var nzaffinitycost=<%= affinityServerCostList.get(3) %>;
     if($('#c_country').val()=="Australia"){
         $('#sl_cost').val(austaffinitycost);
     }
     else{
         $('#sl_cost').val(nzaffinitycost);
     }
 }).trigger('change');