Добрый день. У меня есть такая функция, которая достаёт из JSON файла товары типо для интернет магазина.
function showProducts() {
//выводит продукты из json на страницу
$.getJSON("goods.json", function (data) {
var out = "";
for (var key in data) {
out += `<div class="product" id="${key}">
<img src="${data[key]["image"]}" alt="${data[key]["name"]}">
<div class="content">
<p class="product_name">${data[key]["name"]}</p>
<p class="description">${data[key]["description"]}</p>
<div class="fast_order">
<div class="price">${data[key]["cost"]}р</div>
<div class="buy_button">В корзину</div>
</div>
</div>
</div>`
}
$(".main").append(out);
$(".buy_button").on("click", addToCart);
});
};
Все как бы работает, только вот если я хочу добавить после этих товаров какой нибудь другой блок, то он появляется над ними. Например, вызываю две функции:
$(document).ready(function () {
showProducts();
checkAddedInCart();
});
function checkAddedInCart() {
var kek = "ekkekekekekekkekekekkkkkkekek";
$(".main").append(kek);
};
В итоге надпись "ekkekekekekekkekekekkkkkkekek" появляется над моими товарами.
Заметил, что в отладчике после строки $.getJSON("goods.json", function (data) идёт прыжок к закрывающейся скобке }); и ничего не добавляется на страницу. Глубже разобраться отладчиком не смог, т.к идут вызовы в какие-то файлы js, хотя я и включил blackbox-ы.
Я совсем новичок, так что, наверняка, не знаю какой-то самой простой вещи, подскажите, почему код себя так ведёт?
