jquery загрузка не работает в addEventListener

Question

Я хочу загрузить json файл, когда я нажимаю на одну из кнопок, и я хочу сделать это, используя load метод в jquery. проблема, когда я пишу этот код

let buttons = document.querySelectorAll("button")
buttons.forEach(function(butt, index) {
  butt.addEventListener("click", dos)

  function dos() {
    $("body").load("https://restcountries.eu/rest/v2/all")
  }
});

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>


<button>Change color</button>
<button>Change color</button>
<button>Change color</button>
<button>Change color</button>

консоль выдаст эту ошибку

main. js: 32 Uncaught TypeError: $ (...). Load это не функция в HTMLImageElement.dos

, но когда я удаляю все javascript, за исключением

$("body").load("https://restcountries.eu/rest/v2/all")

, это работает

NOTE : Я не знаю, почему код работает здесь - в редакторе переполнения стека - и jsfiddle. net

Answer 1

Код работает здесь, потому что по умолчанию SO snippets и jsFiddles запускают после , когда DOM полностью загружен. На своей странице вы должны вручную убедиться, что это произошло, прослушивая событие DOMContentLoaded на window. Вы также должны определить функцию dos() вне l oop.

window.addEventListener('DOMContentLoaded', () => {
  let buttons = document.querySelectorAll("button")
  buttons.forEach(function(butt, index) {
    butt.addEventListener("click", dos)
  });
});

function dos() {
  $("body").load("https://restcountries.eu/rest/v2/all")
}

Если вы предпочитаете использовать jQuery для всего этого, это будет выглядеть так:

jQuery($ => {
  $('buton').on('click', () => $("body").load("https://restcountries.eu/rest/v2/all"));
});