未捕获的ReferenceError: $ not defined

Uncaught ReferenceError: $ not defined

本文关键字：not defined ReferenceError 更新时间：2023-09-26

我知道有很多问题都有相同的标签。但我尝试了几个解决方案，都不起作用。以下是我的代码，我不知道如何修复它。

<script>
function setPrice(){
    var price = $(".variation_select option:selected").attr("data-price")
    var sale_price = $(".variation_select option:selected").attr("data-sale-price")
    if (sale_price != "" && sale_price != "None" && sale_price != null ) {
    $("#price").html("<h3>" + sale_price + " <small class='og-price'>" + price  + "</small></h3>");
    } else {
    $("#price").html(price);
    }
}
setPrice()
$(".variation_select").change(function(){
    setPrice()
})
$("#submit-btn").click(function(event){
    event.preventDefault();
    var formData = $("#add-form").serialize();
    console.log(formData);
    $.ajax({
        type:'GET',
        url: "{% url 'cart' %}",
        data: formData,
        success: function(data){
            console.log(data)
        },
        error: function(response, error){
            console.log(response)
            console.log(error)
        }
    })
    // $("#add-form").submit()
})
</script>

错误显示在浏览器检查元素在

var price = $(".variation_select option:selected").attr("data-price")

虽然我不认为这是必要的，但以下是HTML代码:

<div class='col-sm-4'>
<form id='add-form' method='GET' action="{% url 'cart' %}">
<p id='jquery-message' class='lead'>
</p>
    {% if object.variation_set.count > 1 %}
    <h3 id='price'>{{ object.variation_set.first.price }}</h3>
        <select name='item' class='form-control variation_select'>
        {% for vari_obj in object.variation_set.all %}
        <!-- <option data-img="http://www.spirit1059.com/pics/Feeds/Articles/2015611/118317/Beach.jpg" data-price="{{ vari_obj.price }}" value="{{ vari_obj.id }}">{{ vari_obj }}</option> -->
        <option  data-sale-price="{{ vari_obj.sale_price }}" data-price="{{ vari_obj.price }}" value="{{ vari_obj.id }}">{{ vari_obj }}</option>
        {% endfor %}
        </select>
    {% else %}
            <input type="hidden" name='item' value='{{ object.variation_set.first.id }}' />
            <h3 id='price'>{% if object.variation_set.first.sale_price %}
            {{ object.variation_set.first.sale_price  }}
            <small class='og-price'>{{ object.variation_set.first.price }}</small>
            {% else %}
            {{ object.variation_set.first.price }}
            {% endif %}
        </h3>

    {% endif %}
    <br/>
    <input class='form-control' type='number' name='qty' value='1' />
<br/>
<input id='submit-btn' type='submit' value='Add to Cart' class='btn btn-default' />
</form>

Jquery脚本文件包括以下内容:

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="{% static 'js/bootstrap.min.js' %}"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="{% static 'js/ie10-viewport-bug-workaround.js' %}"></script>

如果你不熟悉Django模板语言，请忽略它。您仍然可以跳过模板语言来了解jQuery错误

使用jquery脚本后，使用以下代码:

$(document).ready(function(){
     setPrice()
     $(".variation_select").change(function(){
         setPrice()
     })
});

如果在页面中使用jQuery，则需要在html页面中包含jQuery库。因为最初在javascript中$什么都不是，但$意味着jquery，它告诉浏览器这是一个jquery函数。

在你的网页中包含这个jquery库。

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

在JS代码前添加jQuery脚本

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

定义变量"$"你可以通过在JS代码中添加包装器来实现这一点:

<script>
    (function($){
        // your code here
    })(jQuery)
</script>

尝试在标签前加入jquery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>