django报错：VM80:1 Uncaught ReferenceError: cart_del is not defined at <anonymous>:1:1

一、报错代码及原因

{% extends 'df_goods/base.html' %}

{% block head %}
<script type="text/javascript">
    $(function(){
        total()

        //全选全消
        $('#check_all').click(function(){
            state=$(this).prop('checked');   // 获取当前全选框的状态
            $(':checkbox:not(#check_all)').prop('checked',state);   //将其他的选框都设置成这个状态
        })

        //选择
        $(':checked:not(#check_all)').click(function(){
            if($(this).prop('checked')){  //如果当前复选框被选中，再判断
                if($(':checked').length+1==$(':checkbox').length){
                    $('#check_all').prop('checked',true)
                }
            }
            else{
                $('#check_all').prop('checked',false)
            }
        })

        //数量加
        $('.add').click(function(){    //为所有的 add绑定点击事件
            txt=$(this).next();     //定义当前点击元素的下一个元素
            txt.val(parseInt(txt.val())+1).blur()   //加上.blur是为了模拟移除元素焦点的场景
        })

        //数量减
        $('.minus').click(function(){
            txt=$(this).prev();
            txt.val(parseInt(txt.val())-1).blur()
        })

        //修改，在blur事件里ajax 提交
        $('.num_show').blur(function(){
            count=parseInt($(this).val());
            kucun=parseInt($(this).attr('kucun'))  //获取属性为kucun的值
            if(count<1){
                alert('数量不能小于1');
                $(this).val(1);
                count=1;
                $(this).focus();  //设置焦点
                return;
            }
            else if(count>kucun){
                alert('数量不可超过库存');
                $(this).val(kucun);
                count=kucun;
                $(this).focus();
            }

            cart_id=$(this).parents('.cart_list_td').attr('id'); //获取当前商品的id
            $.get('/cart/edit'+cart_id+'_'+count+'/',function(data){
                if(data.count==0){   //修改成功，计算总价
                    total()
                }
                else{    //修改失败,改为原来的值
                    $(this).val(data.count)
                }
            })
        })

        //计算小计和总计
        function total(){
            total1=0
            total_count=0;

            $('.col07').each(function(){
                //获取数量
                count=$(this).prev().find('input').val();
                //获取单价
                price=$(this).prev().prev().text();
                //计算小计
                total10=parseFloat(count)*parseFloat(price);
                //显示小计
                $(this).text(total10.toFixed(2));

                //加到总计上
                total1+=total10;
                //商品数量
                total_count++;
            })
            //显示总计
            $('#total').html(total1);
            $('.total_count1').html(total_count);
        }

        //删除
        function cart_del(cart_id){
            del=confirm('确定要删除嘛？');
            if(del){
                $.get('/cart/delete'+cart_id+'/',function(data){
                    if(data.ok==1){
                        $('ul').remove('#'+cart_id);    //获取所有的ul标签，并删除这条记录
                        total();
                    }
                })
            }
        }

    })
</script>

{% endblock head %}

{% block center_content %}
    <div class="total_count">全部商品<em>2</em>件</div>    
    <ul class="cart_list_th clearfix">
        <li class="col01">商品名称</li>
        <li class="col02">商品单位</li>
        <li class="col03">商品价格</li>
        <li class="col04">数量</li>
        <li class="col05">小计</li>
        <li class="col06">操作</li>
    </ul>
    <!--<ul class="cart_list_td clearfix">-->
        <!--<li class="col01"><input type="checkbox" name="" checked></li>-->
        <!--<li class="col02"><img src="/static/images/goods/goods012.jpg"></li>-->
        <!--<li class="col03">奇异果<br><em>25.80元/500g</em></li>-->
        <!--<li class="col04">500g</li>-->
        <!--<li class="col05">25.80元</li>-->
        <!--<li class="col06">-->
            <!--<div class="num_add">-->
                <!--<a href="javascript:;" class="add fl">+</a>-->
                <!--<input type="text" class="num_show fl" value="1">    -->
                <!--<a href="javascript:;" class="minus fl">-</a>    -->
            <!--</div>-->
        <!--</li>-->
        <!--<li class="col07">25.80元</li>-->
        <!--<li class="col08"><a href="javascript:;">删除</a></li>-->
    <!--</ul>-->

    {% for cart in carts %}
    <ul class="cart_list_td clearfix" id="{{cart.id}}">
        <li class="col01"><input type="checkbox" name="" checked></li>
        <li class="col02"><img src="/static/{{cart.goods.gpic}}"></li>
        <li class="col03">{{cart.goods.gtitle}}<br><em>{{cart.goods.gprice}}/{{cart.goods.gunit}}</em><br><em>库存：<span id="goods_kucun">{{ cart.goods.gkucun }}</span></em></em></li>
        <li class="col04">{{cart.goods.gunit}}</li>
        <li class="col05">{{cart.goods.gprice}}元</li>
        <li class="col06">
            <div class="num_add">
                <a href="javascript:;" class="add fl">+</a>
                <input type="text" class="num_show fl" value="{{ cart.count }}" kucun="{{ cart.goods.gkucun }}">
                <a href="javascript:;" class="minus fl">-</a>    
            </div>
        </li>
        <li class="col07">{{cart.goods.gprice}}元</li>
        <li class="col08"><a href="javascript:cart_del({{ cart.id }});">删除</a></li>
    </ul>
    {% endfor %}

    <ul class="settlements">
        <li class="col01"><input type="checkbox" name="" checked="" id="check_all"></li>
        <li class="col02">全选</li>
        <li class="col03">合计(不含运费)：<span>¥</span><em id="total"></em><br>共计<b class="total_count1"></b>件商品</li>
        <li class="col04"><a href="place_order.html">去结算</a></li>
    </ul>

{% endblock center_content %}

 

二、为什么会报错？

　　具体原因应该是和html渲染过程有关。总之就是点击的时候立即执行，发现该函数还未定义。所以就报错了

三、解决办法

　　不要把方法写在$(function(){ })里面，即直接写函数，不写window.onload函数或者JQ的ready方法

{% extends 'df_goods/base.html' %}

{% block head %}
<script type="text/javascript">
    $(function(){
        total();
        
        //全选全消
        $('#check_all').click(function(){
            state=$(this).prop('checked');   // 获取当前全选框的状态
            $(':checkbox:not(#check_all)').prop('checked',state);   //将其他的选框都设置成这个状态
        })

        //选择
        $(':checked:not(#check_all)').click(function(){
            if($(this).prop('checked')){  //如果当前复选框被选中，再判断
                if($(':checked').length+1==$(':checkbox').length){
                    $('#check_all').prop('checked',true)
                }
            }
            else{
                $('#check_all').prop('checked',false)
            }
        })

        //数量加
        $('.add').click(function(){    //为所有的 add绑定点击事件
            txt=$(this).next();     //定义当前点击元素的下一个元素
            txt.val(parseInt(txt.val())+1).blur()   //加上.blur是为了模拟移除元素焦点的场景
        })

        //数量减
        $('.minus').click(function(){
            txt=$(this).prev();
            txt.val(parseInt(txt.val())-1).blur()
        })

        //修改，在blur事件里ajax 提交
        $('.num_show').blur(function(){
            count=parseInt($(this).val());
            kucun=parseInt($(this).attr('kucun'))  //获取属性为kucun的值
            if(count<1){
                alert('数量不能小于1');
                $(this).val(1);
                count=1;
                $(this).focus();  //设置焦点
                return;
            }
            else if(count>kucun){
                alert('数量不可超过库存');
                $(this).val(kucun);
                count=kucun;
                $(this).focus();
            }

            cart_id=$(this).parents('.cart_list_td').attr('id'); //获取当前商品的id
            $.get('/cart/edit'+cart_id+'_'+count+'/',function(data){
                if(data.count==0){   //修改成功，计算总价
                    total()
                }
                else{    //修改失败,改为原来的值
                    $(this).val(data.count)
                }
            })
        })
    });


    //计算小计和总计
    function total(){
        total1=0
        total_count=0;

        $('.col07').each(function(){
            //获取数量
            count=$(this).prev().find('input').val();
            //获取单价
            price=$(this).prev().prev().text();
            //计算小计
            total10=parseFloat(count)*parseFloat(price);
            //显示小计
            $(this).text(total10.toFixed(2));

            //加到总计上
            total1+=total10;
            //商品数量
            total_count++;
        })
        //显示总计
        $('#total').html(total1);
        $('.total_count1').html(total_count);
    }

    //删除
    function cart_del(cart_id){
        del=confirm('确定要删除嘛？');
        if(del){
            $.get('/cart/delete'+cart_id+'/',function(data){
                if(data.ok==1){
                    $('ul').remove('#'+cart_id);    //获取所有的ul标签，并删除这条记录
                    total();
                }
            })
        }
    }
</script>

{% endblock head %}

{% block center_content %}
    <div class="total_count">全部商品<em>2</em>件</div>    
    <ul class="cart_list_th clearfix">
        <li class="col01">商品名称</li>
        <li class="col02">商品单位</li>
        <li class="col03">商品价格</li>
        <li class="col04">数量</li>
        <li class="col05">小计</li>
        <li class="col06">操作</li>
    </ul>
    <!--<ul class="cart_list_td clearfix">-->
        <!--<li class="col01"><input type="checkbox" name="" checked></li>-->
        <!--<li class="col02"><img src="/static/images/goods/goods012.jpg"></li>-->
        <!--<li class="col03">奇异果<br><em>25.80元/500g</em></li>-->
        <!--<li class="col04">500g</li>-->
        <!--<li class="col05">25.80元</li>-->
        <!--<li class="col06">-->
            <!--<div class="num_add">-->
                <!--<a href="javascript:;" class="add fl">+</a>-->
                <!--<input type="text" class="num_show fl" value="1">    -->
                <!--<a href="javascript:;" class="minus fl">-</a>    -->
            <!--</div>-->
        <!--</li>-->
        <!--<li class="col07">25.80元</li>-->
        <!--<li class="col08"><a href="javascript:;">删除</a></li>-->
    <!--</ul>-->

    {% for cart in carts %}
    <ul class="cart_list_td clearfix" id="{{cart.id}}">
        <li class="col01"><input type="checkbox" name="" checked></li>
        <li class="col02"><img src="/static/{{cart.goods.gpic}}"></li>
        <li class="col03">{{cart.goods.gtitle}}<br><em>{{cart.goods.gprice}}/{{cart.goods.gunit}}</em><br><em>库存：<span id="goods_kucun">{{ cart.goods.gkucun }}</span></em></em></li>
        <li class="col04">{{cart.goods.gunit}}</li>
        <li class="col05">{{cart.goods.gprice}}元</li>
        <li class="col06">
            <div class="num_add">
                <a href="javascript:;" class="add fl">+</a>
                <input type="text" class="num_show fl" value="{{ cart.count }}" kucun="{{ cart.goods.gkucun }}">
                <a href="javascript:;" class="minus fl">-</a>    
            </div>
        </li>
        <li class="col07">{{cart.goods.gprice}}元</li>
        <li class="col08"><a href="javascript:cart_del({{ cart.id }});">删除</a></li>
    </ul>
    {% endfor %}

    <ul class="settlements">
        <li class="col01"><input type="checkbox" name="" checked="" id="check_all"></li>
        <li class="col02">全选</li>
        <li class="col03">合计(不含运费)：<span>¥</span><em id="total"></em><br>共计<b class="total_count1"></b>件商品</li>
        <li class="col04"><a href="place_order.html">去结算</a></li>
    </ul>

{% endblock center_content %}

 

参考文章见：https://www.cnblogs.com/helloNico/p/10565108.html