JavaScript购物车用加减号替换订单按钮

Question

我正在django中创建电子商务网站，并且正在创建订单按钮。 我希望当我单击订单按钮时​​，应该用+和-代替它来设置值。 一切正常，除了+-按钮没有响应，因为我没有得到控制台输出。 请帮忙。 我正在为此使用本地存储。

{% extends "base.html" %}

{% block style %}
<style type="text/css">

.dot_active {
  height: 15px;
  width: 15px;
  background-color: #82E0AA;
  border-radius: 50%;
  display: inline-block;
}

.dot_closed {
  height: 15px;
  width: 15px;
  background-color: #E74C3C;
  border-radius: 50%;
  display: inline-block;
}

#myInput {
  display: inline-block;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

</style>
{% endblock style %}

{% block content %}
{% load static %}
<link href="{% static '/DataTables/css/jquery.dataTables.min.css' %}" rel="stylesheet">

<script src="{% static '/DataTables/js/jquery.dataTables.min.js' %}"></script>
   <script>
    $(document).ready(function () {
        $('#myTable').dataTable();
    });
</script>


<center><H1>Menu</H1></center>
<table id="myTable" class="table table-striped table-bordered table-sm">
    <thead class="thead-dark">
    <tr>
        <th>Restaurant Name</th>
        <th>Dish Name</th>
        <th>Food Type</th>
        <th>Price</th>
        <th>Description</th>
        <th>Actions</th>
    </tr>
    </thead>
    <tbody>
{% for content in content %}
    <tr>
        <td>{{ content.restaurant.restaurant.restaurant_name }}</td>
        <td>{{ content.dish_name }}</td>
        <td>{% if content.dish_type == "veg" %}<span class="dot_active"></span>   {{ content.dish_type}}{% endif %}
        {% if  content.dish_type == "nonveg" %}<span class="dot_closed"></span>   {{ content.dish_type}}{% endif %}</td>
        <td>{{ content.price }}</td>
        <td>{{ content.description }}</td>
        <td>
         {% if not user.is_restaurant%}
            <span id="divpr{{content.id}}" class="divpr">
            <center><a id="pr{{content.id}}"  class="btn btn-success cart">Order</a></center>
            </span>
         {% else %}<p class="text-danger">LogIn as Customer to Order Food.</p>{% endif %}
        </td>
    </tr>
{% endfor %}
    </tbody>
</table>
{% endblock %}

{% block script %}
<script>
console.log('working');
if(localStorage.getItem('cart') == null){
var cart = {};
}
else
{
cart = JSON.parse(localStorage.getItem('cart'));
document.getElementById('cart-nav').innerHTML = Object.keys(cart).length;
updateCart(cart);
}
$('.cart').click(function(){
console.log('clicked');
var id = this.id.toString();
console.log(id);
if (cart[id] !=undefined){
cart[id] = cart[id] + 1;
}
else
{
cart[id] = 1;
updateCart(cart);
}
console.log(cart);
localStorage.setItem('cart', JSON.stringify(cart));
document.getElementById('cart-nav').innerHTML = Object.keys(cart).length;
});
function updateCart(cart) {
    for (var item in cart) {
        document.getElementById('div' + item).innerHTML = "<button id='minus" + item + "' class='btn btn-primary minus'>-</button> <span id='val" + item + "''>" + cart[item] + "</span> <button id='plus" + item + "' class='btn btn-primary plus'> + </button>";
    }
    localStorage.setItem('cart', JSON.stringify(cart));
    document.getElementById('cart').innerHTML = Object.keys(cart).length;
    console.log(cart);
}
$('.divpr').on("click", "button.minus", function() {
console.log('minus clicked')
});
$('.divpr').on("click", "button.plus", function() {
console.log('plus clicked')
});

</script>
{% endblock %}

<!--href="/menu/order/{{ content.id }}"-->