jQuery和它的.getJSON不起作用，以及如何同步asynchronus .getJSON？

Question

首先，是的，我知道有幾個答案，但沒有一個能夠解決我的問題。 首先，我將展示我的代碼HTML：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Shop</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
    <script src="https://use.fontawesome.com/a565674a9d.js"></script>


    <!--MINE-------------------------------->
    <script src="JS/jquery.js"></script>
    <script src="JS/catalog.js"></script>

</head>
<body>
<nav class="navbar navbar-light">
    <div>
    <a class="navbar-brand" style="text-align: center;position: fixed; left: 40%;" >
        <img src="979709898.png" width="70" height="70" class="d-inline-block align-top" alt="">
        Costumer Bay
    </a>
        <a id="cart" class=" navbar-brand btn btn-danger" style="position: fixed; left: 70%" >
            <i class="fa fa-shopping-cart fa-3x" aria-hidden="true"></i>
        </a>
    </div>
</nav>
<div id="lin1" class="container-fluid" style="padding: 20px;">

</div>
<div id="lin2" class="container-fluid" style="padding: 20px;">

</div>
</body>
</html>

jquery.js是未壓縮的原始jquery源代碼

Data.Json位於JS文件夾中

data.json：

[
    {
        "id":0,
        "name":"Laptop",
        "price":50000 ,
        "quantity":0
    },
    {
        "id":1,
        "name":"Phone",
        "price":30000 ,
        "quantity":0
    },
    {
        "id":2,
        "name":"Desktop",
        "price":70000 ,
        "quantity":0
    },
    {
        "id":3,
        "name":"Headphone",
        "price":9000 ,
        "quantity":0
    },
    {
        "id":4,
        "name":"Tablet",
        "price":35000 ,
        "quantity":0
    },
    {
        "id":5,
        "name":"AntiVirus",
        "price":5000 ,
        "quantity":0
    }
]

現在終於javascript無效了

catalog.js

let productinfo=[];
let firsttime = true;

$(function () {
console.log("here");
    refreshcatalog();
    console.log("now where");
    let cart = $('#cart');
    cart.click(function () {          //NOT!WORKING
        loadcart();
    })

});

function refreshcatalog() {
    console.log("no where");
    if (firsttime){
        console.log('evenhere');
        $.getJSON("JS/data.json",function (data) {
            console.log(data);                         //NOT!WORKING
        });
    }
    if(firsttime){
    firsttime=!firsttime;}
}
function loadcart() {
    console.log("will load cart");
}

即使是點擊事件也不會運行。 請指導我，不，我不知道AJAX，所以請不要使用ajax方法來解決。

請幫忙

<---- EDIT1 ------>

for all those asking for directory structure:
shopping-----
             |_  catalog.html

             |_  JS(folder) -----
                                 |_  catalog.js
                                 |_  jquery.js
                                 |_  data.json

<--------------------- EDIT 2 -__----------->

更改格式后，Click事件開始運行：

$(document).on('click','#button2', function()
{
    alert("Dynamic button action");
});

我舊的“.click”無法正常工作的原因，將不勝感激。我正在使用Firefox開發者版。

Answer 1

下面的代碼需要更改，因為catalog.js和data.json位於同一個文件夾中。

$.getJSON("JS/data.json",function (data) 
    console.log(data);
});

將代碼更改為

$.getJSON("data.json",function (data) {
    console.log(data);
});

請檢查並告訴我您是否能夠控制數據，然后將解決其他問題。

讓我們重新排列腳本（訂購）

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

我已經刪除了jquery slim，因為bootstrap使用它而不是我已經將你的jquery復制到頂部，以便bootstrap可以使用它。

這是編輯過的部分。

請不要從$ .getJSON中刪除JS / data.json。

刪除你的jquery slim和JS / jquery。 嘗試使用以下CDN鏈接或我在評論中提供

它在我當地為我工作。

jQuery和它的.getJSON不起作用，以及如何同步asynchronus .getJSON？

問題描述

1 個解決方案

解決方案1
0 已采納 2017-07-01 02:02:49

jQuery和它的.getJSON不起作用，以及如何同步asynchronus .getJSON？

問題描述

1 個解決方案

解決方案1 0 已采納 2017-07-01 02:02:49

解決方案1
0 已采納 2017-07-01 02:02:49