$ .ajax работает при немедленном вызове, но не при вызове обратного вызова

Question

Когда getWeather () вызывается самостоятельно при загрузке страницы, вызов API и запись ответа в DOM работают.Но если я вызываю getWeather по нажатию кнопки, ничего не происходит (без ошибок в консоли).

  const submitButton = document.querySelector('input[type="submit"]');
  const max = document.querySelector('.max');

  getWeather = () => {   
    $.ajax(weatherEndpoint)
       .then(function(response) {
          //response  
          const maxTemp = response.main.temp_max;
          //write response to DOM
          max.innerText = maxTemp;
        });
      }

  //this works:        
  getWeather()  

 //this does not work:
 //submitButton.addEventListener("click", getWeather ) 

Answer 1

Как вы упомянули

//this does not work:
 //submitButton.addEventListener("click", getWeather )  

попробуйте это снизу

$('input[type="submit"]').click(getWeather);

и затем удалите строку

getWeather();

Answer 2

Поскольку вы используете jquery, вы можете просто использовать click(), чтобы прикрепить событие к кнопке:

$(submitButton).click(function(e) {
    e.preventDefault();
    getWeather();
});

Если submitButton находится в форме и оноравен type="submit", тогда он отправит форму на сервер.Чтобы прекратить это использование e.preventDefault();

Вы должны добавить это в свой код:

getWeather = (e) => {  
    e.preventDefault(); 
    $.ajax(weatherEndpoint)
       .then(function(response) {
          //response  
          const maxTemp = response.main.temp_max;
          //write response to DOM
          max.innerText = maxTemp;
    });
}

и позвонить с submitButton.addEventListener("click", getWeather );.