jq的点击事件没有反应,加入购物车那里,完全没有反应,alert都出不来,这是为什么?

<!DOCTYPE html>
xmlns:th="http://www.thymeleaf.org">



content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">





食品网

rel="apple-touch-icon-precomposed"> html, body { background-color: #efeff4; } .mui-bar .mui-pull-left .mui-icon { padding-right: 5px; font-size: 28px; } .mui-bar .mui-btn { font-weight: normal; font-size: 17px; } .mui-bar .mui-btn-link { top: 1px; } .mui-content img { width: 100%; } .hm-description { margin: 15px; } .hm-description>li { font-size: 14px; color: #8f8f94; } .shou{ color:#ff3300; }


<header id="header" class="mui-bar mui-bar-transparent">
    <a class="mui-action-back mui-icon mui-icon-arrowleft mui-pull-left"
        style="color:#666"></a>
    <h1 class="mui-title"></h1>
    <a class="mui-icon mui-icon-paperplane mui-pull-right"
        style="color: #666"></a>
</header>

<div class="mui-content" style="background: #fff">
    <div id="slider" class="mui-slider">
        <div class="mui-slider-group">
            <div class="mui-slider-item">
                <a href="#"> <img th:src="${food.image1}">
                </a>
            </div>
        </div>
        <div class="mui-slider-indicator">
            <div class="mui-indicator mui-active"></div>
            <div class="mui-indicator"></div>
        </div>
    </div>
    <div class="aui-title-h b-line">
        <h3 th:text="${food.fname}"></h3>
        <p th:text="${food.fdetail}"></p>
        <em th:text="'¥'+${food.fprice}"></em> <i
            th:text="'价格¥'+${food.fprice}"></i>
        <div class="aui-title-sp ">
            <span class="mui-icon-extra mui-icon-extra-heart"
                th:text="'销量 '+${food.salesvolume}"></span> <span
                class="mui-icon-extra mui-icon-extra-heart"
                th:text="'收藏 '+${food.collection}"></span> <span
                class="mui-icon-extra mui-icon-extra-heart">美食快递</span>
        </div>
    </div>
    <div class="devider b-line"></div>
    <div class="">
        <div style="padding: 0 10px; margin-top: 10px" class="">
            <div id="segmentedControl" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-primary">
                <a class="mui-control-item mui-active" href="#item1">食品详情</a> 
                <a class="mui-control-item" href="#item2">材料</a> 
                <a class="mui-control-item" href="#item3">食品评价</a>
            </div>
        </div>
        <div>
            <div id="item1" class="mui-control-content mui-active"
                style="height: 1200px">
                <div class="aui-p">
                    <p th:text="${food.fname}"></p>
                </div>
                <div class="aui-kill aui-op">
                    <img th:src="${food.image2}" alt="">
                </div>
                <div class="aui-kill aui-op">
                    <img th:src="${food.image3}" alt="">
                </div>
                <div class="aui-kill aui-op">
                    <img th:src="${food.image4}" alt="">
                </div>
            </div>
            <input type="hidden" id="fid" name="fid" th:value="${food.fid}" />
            <!-- <input type="hidden" id="num" name="num" th:value="${num}" />  -->
            <div id="item2" class="mui-control-content">
                <ul class="mui-table-view " th:each="materiallist:${materiallist}">
                    <li class="mui-table-view-cell b-line"
                        th:text="${materiallist}"></li>
                </ul>
            </div>
            <div id="item3" class="mui-control-content" style="text-align:center">评价</div>
        </div>
    </div>

    <div style="height: 900px"></div>
</div>
<div style="height: 50px"></div>
<nav class="mui-bar mui-bar-tab">
    <div class="t-line aui-on-cell">
        <div class="aui-ons">
            <a href="#"><span
                class="mui-icon-extra mui-icon-extra-addpeople"></span><i>客服</i></a> <a
                href="#"><span class="mui-icon-extra mui-icon-extra-university"></span><i>店铺</i></a>
            <a href="#"><span
                class="mui-icon-extra mui-icon-extra-heart-filled " id="obj" onclick="ou(this)"></span><i>收藏</i></a>
        </div>
                <input type="hidden" id="hh" value="收藏"/>
        <div class="aui-onc">
            <a  href="#" style="margin-right: -4px" name="btn" id="btn">加入购物车</a>
            <a th:href="@{./toOneOrder(fid=${food.fid})}" class="aui-got">立即购买</a>
        </div>
    </div>
</nav>
<script th:src="@{js/mui.min.js}"></script>
        <script>
        //
    mui.init({
        swipeBack: true //启用右滑关闭功能
    });
    (function($) {
        $('#scroll').scroll({
            indicators: true //是否显示滚动条
        });
        var segmentedControl = document.getElementById('segmentedControl');
        $('.mui-input-group').on('change', 'input', function() {
            if (this.checked) {
                var styleEl = document.querySelector('input[name="style"]:checked');
                var colorEl = document.querySelector('input[name="color"]:checked');
                if (styleEl && colorEl) {
                    var style = styleEl.value;
                    var color = colorEl.value;
                    segmentedControl.className = 'mui-segmented-control' + (style ? (' mui-segmented-control-' + style) : '') + ' mui-segmented-control-' + color;
                }
            }
        });
    })(mui);
</script>
<script type="text/javascript">
$(function(){
    var num=document.getElementById("num").value
    var obj=document.getElementById("obj")
    if(num==0){
        $(obj).removeClass('shou');
    }else{
        $(obj).addClass('shou');
    }  
});

function ou(obj){
        console.log($(obj).hasClass('shou'));
        if($(obj).hasClass('shou')==true){
            $(obj).removeClass('shou');
            var gid=document.getElementById("fid").value
            $.ajax({
                url:"./delcollection",
                data:{"fid":gid},
                type:"post",
                success: function (data) {

                }
            });
        }else {
            var gid=document.getElementById("fid").value
            $(obj).addClass('shou');
            $.ajax({
                url:"./collection",
                data:{"fid":gid},
                type:"post",
                success: function (data) {
                    if(data=="error"){
                        alert("未登录,不能收藏!")
                        window.location.href="login.html"
                    }
                }
            });
        } 

    }
function addCard(){
    alert("hhhh")
    var gid=$("#fid").val();
    $.ajax({
        url:"./addcar",
        data:{"fid":gid},
        type:"post",
        success: function (data) {
            if(data=="error"){
                alert("未登录,不能添加!")
                window.location.href="login.html"
            }
        }
    });

}

(function ($) {
$.extend({
tipsBox: function (options) {
options = $.extend({
obj: null, //jq对象,要在那个html标签上显示
str: "+1", //字符串,要显示的内容;也可以传一段html,如: "+1"
startSize: "12px", //动画开始的文字大小
endSize: "30px", //动画结束的文字大小
interval: 600, //动画时间间隔
color: "red", //文字颜色
callback: //回调函数
}, options);
$("body").append("" + options.str + "");
var box = $(".num");
var left = options.obj.offset().left + options.obj.width() / 2;
var top = options.obj.offset().top - options.obj.height();
box.css({
"position": "absolute",
"left": left + "px",
"top": top + "px",
"z-index": 9999,
"font-size": options.startSize,
"line-height": options.endSize,
"color": options.color
});
box.animate({
"font-size": options.endSize,
"opacity": "0",
"top": top - parseInt(options.endSize) + "px"
}, options.interval, function () {
box.remove();
options.callback();
});
}
});
})(jQuery);

function niceIn(prop){
prop.find('i').addClass('niceIn');
setTimeout(function(){
prop.find('i').removeClass('niceIn');

},1000);

}

$(function () {
$("#btn").click(function () {
alert("1111111111")
$.tipsBox({
obj: $(this),
str: "+1",
callback: function () {

        }
    });
    niceIn($(this));
});

});

<script type="text/javascript">
mui.init({
    swipeBack: true //启用右滑关闭功能
});
var slider = document.getElementById("slider");
mui('.mui-input-group').on('change', 'input', function() {
    if (this.checked) {
        switch (this.value) {
            case 'static':
                document.getElementById("img1").className = "";
                document.getElementById("slider").classList.add("mui-hidden");
                break;
            case 'slider':
                document.getElementById("img1").className = "mui-hidden";
                if(slider.classList.contains("mui-hidden")){
                    document.getElementById("slider").classList.remove("mui-hidden");
                }
                break;
        }
    }
});


6个回答

你的代码语法有错语法错了,导致整个代码所处的script全部出错,没有绑定上事件,同时你还得注意检查导入的js文件路径都对了没有

         (function ($) {
            $.extend({
                tipsBox: function (options) {
                    options = $.extend({
                        obj: null,  //jq对象,要在那个html标签上显示
                        str: "+1",  //字符串,要显示的内容;也可以传一段html,如: "<b style='font-family:Microsoft YaHei;'>+1</b>"
                        startSize: "12px",  //动画开始的文字大小
                        endSize: "30px",    //动画结束的文字大小
                        interval: 600,  //动画时间间隔
                        color: "red",    //文字颜色
                       ///////////////// callback:  //回调函数。//////////////////////////////////////////////////这里语法错了,如果没有回掉去掉这个配置
                        }, options);
                    $("body").append("<span class='num'>" + options.str + "</span>");
                    var box = $(".num");
                    var left = options.obj.offset().left + options.obj.width() / 2;
                    var top = options.obj.offset().top - options.obj.height();
                    box.css({
                        "position": "absolute",
                        "left": left + "px",
                        "top": top + "px",
                        "z-index": 9999,
                        "font-size": options.startSize,
                        "line-height": options.endSize,
                        "color": options.color
                    });
                    box.animate({
                        "font-size": options.endSize,
                        "opacity": "0",
                        "top": top - parseInt(options.endSize) + "px"
                    }, options.interval, function () {
                        box.remove();
                        options.callback();
                    });
                }
            });
        })(jQuery);

这个函数你调用了吗…

在您的这句话里 加入购物车
您并没有调用加入购物车的方法。您可以设置一个点击事件onclick="addCard" 在点击时调用方法。

建议减去部分代码测试,不行就多减去部分代码测试,如果代码太多,某行代码出问题,导致整体代码不执行

是不是选择器根本就没选上你点击的那个地方,要么就是函数没有被调用到,alert都出不来,多半是选择器有问题吧

一般来说,你按F12到开发者调试页面,会有具体的错误信息以及代码错误行数显示

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
如何使用jq在点击表格某一行时,让此行之前的所有行都变色
-
jq或js批量添加点击事件
-
jq dblclick事件的this指向
-
标签上直接添加onclick事件和jq绑定onclick事件有什么区别
-
请问js,jq怎么实现多个同id的div绑定一个点击事件?
-
jq无法进行点击事件,无报错!
-
请问如何在百度地图上叠加用户上传的shp面要素(需要自定义功能模块)
-
关于C#新闻网站点击新闻标题跳转到新闻详细页面 求助!!!!!
-
有什么上传图片的插件?
-
select 如何使用JS&JQ模拟真实的点击事件
-
JQ 点击按钮显示内容 点击任何地方隐藏内容 代码怎么实现。
-
js,jq怎么实现点击出现一个div,再次点击div消失
-
jq live方法阻止事件冒泡
-
关于ssm项目中css样式,js文件失效的问题
-
用JQ实现 当发现class值等于cid值时,一个DIV自动加入另一个DIV 的ul li中去
-
VS2017写jq脚本为何没有提示?
-
为什么我的jq没有作用
-
jq,点击相同div,子节点添加或删除class
-
程序员竟然钟爱这个!我 low了
今天和一帮程序员大佬群里闲聊(需要入群的可以加最底下微信哦~)聊着聊着竟然扯到鞋子一直在讨论穿什么鞋子比较耐脏然后一帮大佬集中围殴小白鞋说小白鞋虽然百搭但是太容易脏,太不...
程序员实用工具网站
目录 1、搜索引擎 2、PPT 3、图片操作 4、文件共享 5、应届生招聘 6、程序员面试题库 7、办公、开发软件 8、高清图片、视频素材网站 9、项目开源 10、算法 11、在线工具宝典大全 程序员开发需要具备良好的信息检索能力,为了备忘(收藏夹真是满了),将开发过程中常用的网站进行整理。 1、搜索引擎 1.1、秘迹搜索 一款无敌有良心、无敌安全的搜索引擎,不会收...
996下的程序员,该如何保证自己的身体健康?
作者:陈大鱼头github:KRISACHAN自从开始写代码之后,一天里大部分的时间都贡献了给了电脑跟那张从X总办公室里搬回来的人体工学椅了。鱼头也经历过无数次的 肥胖 ...
史上最详细的IDEA优雅整合Maven+SSM框架(详细思路+附带源码)
网上很多整合SSM博客文章并不能让初探ssm的同学思路完全的清晰,可以试着关掉整合教程,摇两下头骨,哈一大口气,就在万事具备的时候,开整,这个时候你可能思路全无 ~中招了咩~ ,还有一些同学依旧在使用eclipse或者Myeclipse开发,我想对这些朋友说IDEA 的编译速度很快,人生苦短,来不及解释了,直接上手idea吧。这篇文章每一步搭建过程都测试过了,应该不会有什么差错。本文章还有个比较优秀的特点,就是idea的使用,基本上关于idea的操作都算是比较详细的,所以不用太担心不会撸idea!最后,本文
全球最厉害的 14 位程序员!
来源 | ITWorld 整理自网络全球最厉害的 14 位程序员是谁?今天就让我们一起来了解一下吧,排名不分先后。01. Jon Skeet个人名望:程序技术问答网站 S...
我花了一夜用数据结构给女朋友写个H5走迷宫游戏
起因 又到深夜了,我按照以往在csdn和公众号写着数据结构!这占用了我大量的时间!我的超越妹妹严重缺乏陪伴而 怨气满满! 而女朋友时常埋怨,认为数据结构这么抽象难懂的东西没啥作用,常会问道:天天写这玩意,有啥作用。而我答道:能干事情多了,比如写个迷宫小游戏啥的! 当我码完字准备睡觉时:写不好别睡觉! 分析 如果用数据结构与算法造出东西来呢? ...
招人!入职阿里仅1年,我和做AI的程序员薪资翻了2倍!
最近在知乎上,关于AI的这个话题又被顶起来,其中,这条回答让人印象深刻:在这短短的一条信息里,无疑显示出:AI行业缺人,高端岗位80万年薪恐怕也招不来!小编上周在一个AI...
什么是大公司病(太形象了)
点击蓝色“五分钟学算法”关注我哟加个“星标”,天天中午 12:15,一起学算法作者 | 南之鱼来源 | 芝麻观点(chinamkt)所谓大企业病,一般都具有机构臃肿、多重...
让程序员崩溃的瞬间(非程序员勿入)
今天给大家带来点快乐,程序员才能看懂。 来源:https://zhuanlan.zhihu.com/p/47066521 1. 公司实习生找 Bug 2.在调试时,将断点设置在错误的位置 3.当我有一个很棒的调试想法时 4.偶然间看到自己多年前写的代码 5.当我第一次启动我的单元测试时 ...
Spring高级技术梳理
Spring高级技术梳理 序言正文SpringDate部分Spring全家桶之SpringData——预科阶段Spring全家桶之SpringData——Spring 整合Hibernate与Hibernate JpaSpring全家桶之SpringData——Spring Data JPASpring全家桶之SpringData——SpringData RedisSpringBoot部分Sp...
Git 天天用 但是 Git 原理你了解吗?
Git 原理 做技术一定要知其然知其所以然,意思就是:知道它是这样的,更知道它为什么是这样的。我主要通过4块内容来简单介绍 Git 是原理是什么样的。这4块内容如下: Git 存储目录结构介绍 Git 是如何存储的 Git 的对象 Git引用 当然 Git 原理不仅仅包含这些,想要更深入了解请查看官方教程 https://git-scm.com/book/zh/v2/。 本文内容是我在 Git...
Android——微信自动回复实现
首先本文的测试微信版本是7.0.3 ,亲测可以使用。 需要实现-抓取微信自动回复消息的功能点。 一.首先打开DDMS,使用按钮。 在微信中回复一个消息 点击Stop Method Profiling。 二.查看生成的报表,观察到如下两个方法 其中1应该是发送消息的接口方法。2应该是UI层显示的方法。 三.首先分析第一个方法: 1.,可以看到,参数值是String,返...
分享靠写代码赚钱的一些门路
作者 mezod,译者 josephchang10如今,通过自己的代码去赚钱变得越来越简单,不过对很多人来说依然还是很难,因为他们不知道有哪些门路。今天给大家分享一个精彩...
对计算机专业来说学历真的重要吗?
我本科学校是渣渣二本,研究生学校是985,现在毕业五年,校招笔试、面试,社招面试参加了两年了,就我个人的经历来说下这个问题。 这篇文章很长,但绝对是精华,相信我,读完以后,你会知道学历不好的解决方案,记得帮我点赞哦。 先说结论,无论赞不赞同,它本质就是这样:对于技术类工作而言,学历五年以内非常重要,但有办法弥补。五年以后,不重要。 目录: 张雪峰讲述的事实 我看到的事实 为什么会这样 ...
技术人员要拿百万年薪,必须要经历这9个段位
很多人都问,技术人员如何成长,每个阶段又是怎样的,如何才能走出当前的迷茫,实现自我的突破。所以我结合我自己10多年的从业经验,总结了技术人员成长的9个段位,希望对大家的职...
8000字干货:那些很厉害的人是怎么构建知识体系的
本文约8000字,正常阅读需要15~20分钟。读完本文可以获得如下收益: 分辨知识和知识体系的差别 理解如何用八大问发现知识的连接点; 掌握致用类知识体系的构建方法; 能够应用甜蜜区模型找到特定领域来构建知识体系。 1. 知识体系?有必要吗? 小张准备通过跑步锻炼身体,可因为之前听说过小腿变粗、膝盖受伤、猝死等等与跑步有关的意外状况,有点担心自己会掉进各种坑里,就在微信上问朋友圈一直晒跑步...
万字长文!线性代数的本质课程笔记完整合集
点击上方“Datawhale”,选择“星标”公众号第一时间获取价值内容系列目录1.向量究竟是什么https://www.bilibili.com/video/av5987...
Java 网络爬虫,就是这么的简单
这是 Java 网络爬虫系列文章的第一篇,如果你还不知道 Java 网络爬虫系列文章,请参看 学 Java 网络爬虫,需要哪些基础知识。第一篇是关于 Java 网络爬虫入门内容,在该篇中我们以采集虎扑列表新闻的新闻标题和详情页为例,需要提取的内容如下图所示: 我们需要提取图中圈出来的文字及其对应的链接,在提取的过程中,我们会使用两种方式来提取,一种是 Jsoup 的方式,另一种是 httpcli...
nginx学习,看这一篇就够了:下载、安装。使用:正向代理、反向代理、负载均衡。常用命令和配置文件
文章目录前言一、nginx简介1. 什么是 nginx 和可以做什么事情2.Nginx 作为 web 服务器3. 正向代理4. 反向代理5. 动静分离6.动静分离二、Nginx 的安装三、 Nginx 的常用命令和配置文件四、 Nginx 配置实例 1 反向代理五、 Nginx 配置实例 2 负载均衡六、 Nginx 配置实例 3 动静分离七、 Nginx 的高可用集群 前言 一、nginx简介...
Java 爬虫遇上数据异步加载,试试这两种办法!
这是 Java 爬虫系列博文的第三篇,在上一篇 Java 爬虫遇到需要登录的网站,该怎么办? 中,我们简单的讲解了爬虫时遇到登录问题的解决办法,在这篇文章中我们一起来聊一聊爬虫时遇到数据异步加载的问题,这也是爬虫中常见的问题。 现在很多都是前后端分离项目,这会使得数据异步加载问题更加突出,所以你在爬虫时遇到这类问题不必惊讶,不必慌张。对于这类问题的解决办法总体来说有以下两种: 1、内置一个浏览器内...
Angular 入门教程系列:39:使用ng-alain进行开发
在前面的文章中介绍过ng-alain,当时在使用的时候还显得不是很方便,最简单的一个demo运行的都不是非常流畅。而目前的版本已经做有较大的改进,再这个基础上进行二次开发,尤其是一些后端的平台或者监控的平台看起来都比较不错。在这篇文章中继续来确认一下使用的感受。
Angular 入门教程系列:40:使用webpack-bundle-analyzer对构建结果进行分析
webpack-bundle-analyzer是一个npm的package,可以用于构建结果的分析。在实际的使用中,由于Angular页面的特点,项目稍大一些之后,即使使用了prod等选项进行优化,也往往编译后会有数M之大。这时使用webpack-bundle-analyzer即可对结果进行分析,可以通过webpack-bundle-analyzer生成的分析结果对各个组成部分的大小进行非常方便...
相关热词 c#该名称在封闭局部范围 c#泛型 排序 c# 测试连接mysql c# 多线程 调用界面值 c# gdi unity c#反射构造带参对象 一起自学c# c#工厂方法 c# 对象属性保存xml u3d用c#写拾取物品