【blog项目】layui与jquery冲突导致鼠标悬停事件失效、如何调用layui.use()作用域里的方法

news2024/11/15 15:44:56

blog项目前台展示——查询数据库中的文章类型并展示时出现的bug

1 正常演示

在这里插入图片描述

2 用jquery查询数据库并添加到页面后

在这里插入图片描述

3 相关代码

<script src="/static/jquery-2.1.4.js"></script>
<script src="/static/layui/layui.js"></script>
<script src="/static/js/yss/gloable.js"></script>
<script src="/static/js/plugins/nprogress.js"></script>
<script>NProgress.start();</script>
<script src="/static/js/yss/article.js"></script>

$.post(
	'/blog?method=selectBlogType',
	function (result) {
		if (result.code === 0) {
			console.log(result.data);
			var i = 2;
			$(result.data).each(function (){
				console.log(this.name);
				var html = '';
				/*<li data-index="3"><a href="/Blog/Article/2/" onClick="selectByType('1')">HTML5&amp;CSS3</a></li>*/
				html += '<li data-index="'+ i +'"><a href="javascript:void(0)" οnclick="selectByType('+ this.id +', null)">' + this.name +'</a></li>';
				$('#category').append(html);
				i++;
			});
		}
	},
	'json'
)

其余部分：

layui.use(['form'], function(){
			var form = layui.form;

			// 搜索提交
			form.on('submit(submitSearch)', function(data){
				var field = data.field; // 获得表单字段JSON格式
				//console.log(field);//title
				selectByType(null, field.title);
				return false; // 阻止默认 form 跳转
			});
		});

		function selectByType(typeId, title) {
			$.post(//抽取成方法 直接放到function里边就行
				'/blog?method=selectByType',
				{'typeId': typeId,'title': title},
				function (result) {
					if(result.code === 0) {
						$('#LAY_bloglist').empty();
						$(result.data).each(function (){
							//js切割日期并展示
							var html = '';
							html += '<section class="article-item zoomIn article">';
							html += '	<div class="fc-flag">置顶</div>';
							html += '	<h5 class="title">';
							html += '		<span class="fc-blue">【原创】</span>';
							html += '		<a href="read.html">'+this.title+'</a>';
							html += '	</h5>';
							html += '	<div class="time">';
							html += '		<span class="day">21</span>';
							html += '		<span class="month fs-18">1<span class="fs-14">月</span></span>';
							html += '		<span class="year fs-18 ml10">'+ this.createTime +'</span>';
							html += '	</div>';
							html += '	<div class="content" style="height: 180px; overflow:hidden">';
							html += '		<a href="read.html" class="cover img-light">';
							html += '			<img src="/pic/'+ this.image +'">';
							html += '		</a>';
							html += '		'+ this.content +'';
							html += '	</div>';
							html += '	<div class="read-more">';
							html += '		<a href="read.html" class="fc-black f-fwb">继续阅读</a>';
							html += '	</div>';
							html += '	<aside class="f-oh footer">';
							html += '		<div class="f-fl tags">';
							html += '			<span class="fa fa-tags fs-16"></span>';
							html += '			<a class="tag">ASP.NET MVC</a>';
							html += '		</div>';
							html += '		<div class="f-fr">';
							html += '		<span class="read">';
							html += '			<i class="fa fa-eye fs-16"></i>';
							html += '			<i class="num">57</i>';
							html += '		</span>';
							html += '			<span class="ml20">';
							html += '			<i class="fa fa-comments fs-16"></i>';
							html += '			<a href="javascript:void(0)" class="num fc-grey">1</a>';
							html += '		</span>';
							html += '		</div>';
							html += '	</aside>';
							html += '</section>';

							$('#LAY_bloglist').append(html);
						})
					}
				},
				'json'
			);
		}

4 原因分析

4.1 用jquery添加的新节点没有绑定相应的事件监听器

这是我用火狐浏览器才发现的(就是那个event)，其他浏览器没有明显地显示事件监听器
在这里插入图片描述

4.2 因为layui本身就用到了jquery，所以再导入jquery并使用产生了一些冲突（具体是啥没分析出来，控制变量法得知是有问题的）

在这里插入图片描述

5 解决措施

针对4.1

让我想到了后台管理界面的权限管理展示逻辑也是查询后再生成的，也是用的layui，但它却正常带有事件监听器，正常显示
在这里插入图片描述
回顾了下代码发现是将查询到的数据放到了session（域对象）中，然后用JSTL的foreach进行遍历生成的，而不是用jquery
servlet：
在这里插入图片描述
jsp（html）：
在这里插入图片描述
所以我也修改了这个前台的类型展示逻辑：查询出博客类型后放到session中然后用JSTL来遍历(试了下request好像不行？)
servlet：

private void selectBlogType(HttpServletRequest req, HttpServletResponse resp) {
    System.out.println("BlogController.selectBlogType");
    List<Type> types = blogService.selectBlogType();
    System.out.println(types);
    HttpSession session = req.getSession();
    session.setAttribute("types", types);
    //toJSON(resp, Result.ok("查询成功", types));
    toJSON(resp, Result.ok("查询成功",types));
}

jsp(html)：
在这里插入图片描述

<ul class="category mt20" id="category">
    <li data-index="0" class="slider"></li>
    <li data-index="1"><a href="javascript:void(0)" onclick="tools.selectByType(null)">全部文章</a></li>
	<c:forEach items="${types}" var="type" varStatus="st">
		<li data-index="${st.count+1}"><a href="javascript:void(0)" onclick="tools.selectByType(${type.id},null)">${type.name}</a></li>
	</c:forEach>
</ul>

这样改之后还是不行，主要原因就是4.2

针对4.2

不再单独引入jquery，直接在layui.use中调用jquery，使用layui自带的jquery。
这就需要把所有的jquery相关的操作全都放进layui.use，这就导致了另一个问题：
a标签的onclick绑定的方法也在layui.use里边，如何调用layui.use()作用域里的方法？
使用layui，动态生成的标签加onclick点击事件,终于找到一个能用的方法了,可以获取当前元素
如何调用layui.use()作用域里的方法
我采用了第二篇博客的方法，很管用！
jsp（js）：

layui.use(['form', 'jquery'], function(){
	var form = layui.form;
	var $ = layui.$ //重点处

	var _tools = {
		selectByType: function (typeId, title) {
			$.post(//抽取成方法 直接放到function里边就行
					'/blog?method=selectByType',
					{'typeId': typeId,'title': title},
					function (result) {
						if(result.code === 0) {
							$('#LAY_bloglist').empty();
							$(result.data).each(function (){
								//js切割日期并展示
								var html = '';
								html += '<section class="article-item zoomIn article">';
								html += '	<div class="fc-flag">置顶</div>';
								html += '	<h5 class="title">';
								html += '		<span class="fc-blue">【原创】</span>';
								html += '		<a href="read.html">'+this.title+'</a>';
								html += '	</h5>';
								html += '	<div class="time">';
								html += '		<span class="day">21</span>';
								html += '		<span class="month fs-18">1<span class="fs-14">月</span></span>';
								html += '		<span class="year fs-18 ml10">'+ this.createTime +'</span>';
								html += '	</div>';
								html += '	<div class="content" style="height: 180px; overflow:hidden">';
								html += '		<a href="read.html" class="cover img-light">';
								html += '			<img src="/pic/'+ this.image +'">';
								html += '		</a>';
								html += '		'+ this.content +'';
								html += '	</div>';
								html += '	<div class="read-more">';
								html += '		<a href="read.html" class="fc-black f-fwb">继续阅读</a>';
								html += '	</div>';
								html += '	<aside class="f-oh footer">';
								html += '		<div class="f-fl tags">';
								html += '			<span class="fa fa-tags fs-16"></span>';
								html += '			<a class="tag">ASP.NET MVC</a>';
								html += '		</div>';
								html += '		<div class="f-fr">';
								html += '		<span class="read">';
								html += '			<i class="fa fa-eye fs-16"></i>';
								html += '			<i class="num">57</i>';
								html += '		</span>';
								html += '			<span class="ml20">';
								html += '			<i class="fa fa-comments fs-16"></i>';
								html += '			<a href="javascript:void(0)" class="num fc-grey">1</a>';
								html += '		</span>';
								html += '		</div>';
								html += '	</aside>';
								html += '</section>';

								$('#LAY_bloglist').append(html);
							})
						}
					},
					'json'
			);
		},
	}
	window.tools = _tools;

	_tools.selectByType(null, null);
	/*$.post(
			'/blog?method=selectBlogType',
			function (result) {
				/!*if (result.code === 0) {
					console.log(result.data);
					var i = 2;
					$(result.data).each(function (){
						console.log(this.name);
						var html = '';
						/!*<li data-index="3"><a href="/Blog/Article/2/" onClick="selectByType('1')">HTML5&amp;CSS3</a></li>*!/
						html += '<li data-index="'+ i +'"><a href="javascript:void(0)" οnclick="tools.selectByType('+ this.id +', null)">' + this.name +'</a></li>';
						$('#category').append(html);
						i++;
					});
				}*!/
			},
			'json'
	)*/

	// 搜索提交
	form.on('submit(submitSearch)', function(data){
		var field = data.field; // 获得表单字段JSON格式
		//console.log(field);//title
		_tools.selectByType(null, field.title);
		return false; // 阻止默认 form 跳转
	});
});

jsp（html）：

<ul class="category mt20" id="category">
    <li data-index="0" class="slider"></li>
    <li data-index="1"><a href="javascript:void(0)" onclick="tools.selectByType(null)">全部文章</a></li>
	<c:forEach items="${types}" var="type" varStatus="st">
		<li data-index="${st.count+1}"><a href="javascript:void(0)" onclick="tools.selectByType(${type.id},null)">${type.name}</a></li>
	</c:forEach>
</ul>

查询文章类型并放到session的操作我放到了上一个页面，如果放在这个页面的话，第一次加载时JSTL没法取到session中的内容，需要刷新一次才能显示出来，感觉不太好。
为了保持一致性，还是使用了layui里边的jquery，并且加了个查询反馈弹窗（拖会儿时间，保证跳转到页面时session中已经有内容了）
index.jsp：
js代码：

layui.use(['layer', 'jquery'],function (){
    var layer = layui.layer;
    var $ = layui.$ //重点处
    $('#selectBlogType').on('click', function (){
        $.post(
            '/blog?method=selectBlogType',
            function (result) {
                if (result.code === 0) {
                    layer.msg(
                        result.msg,
                        {icon: 1, time: 1000},
                        function() {// msg消失之后触发的函数
                            location.href = '/page/list';
                        }
                    );
                }
            },
            'json'
        )
    })
})

html代码：

<li><a href="javascript:void(0)" id="selectBlogType">博客列表</a></li>

6 结果展示

在这里插入图片描述

7 其他参考

jsp中使用c:forEach标签自动添加序号

基础知识回顾：
layui发送ajax请求post
Layui中jquery的使用方式

拓展——jquery事件委托：
jQuery-给ul添加了li之后，添加的li并没有绑定点击监听怎么办？
jQuery学习：事件委托–新添加的元素没有监听
JS事件监听与事件委托（前端小白必学）

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1622183.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

信息系统项目管理师——质量管理论文写法以及子题目

信息系统项目管理师——质量管理论文写法以及子题目

质量管理概论 过程组过程名称含义输入工具和技术输出规划过程组规划质量管理制定质量管理策略、明确质量标准与过程&#xff0c;以确保项目满足既定质量要求。- 项目管理计划- 干系人登记册- 需求文档- 组织过程资产1.专家判断 2.数据收集 标杆对照 头脑风暴 访谈 3.数据分析 …
阅读更多...
【网络安全】跨站脚本攻击（XSS)

【网络安全】跨站脚本攻击（XSS)

专栏文章索引&#xff1a;网络安全 有问题可私聊&#xff1a;QQ&#xff1a;3375119339 目录 一、XSS简介 二、XSS漏洞危害 三、XSS漏洞类型 1.反射型XSS 2.存储型XSS 3.DOM型XSS 四、XSS漏洞防御 一、XSS简介 XSS&#xff08;Cross-Site Scripting&#xff09; XSS 被…
阅读更多...
机器视觉系统-工业光源什么是高角度光，以及发光角度得分类

机器视觉系统-工业光源什么是高角度光，以及发光角度得分类

光路描述&#xff1a;光线与水平面角度>45称为高角度光。 效果分析&#xff1a;高角度照射&#xff0c;光线经 被测物表面平整部分反射后进入镜头&#xff0c;图像效果表现为灰度值较高&#xff1b;不平整部分反射光进入不了镜头&#xff0c;图像效果表现为灰度值较低。 主要…
阅读更多...
高薪诱惑下，跳槽真的是明智选择吗？

高薪诱惑下，跳槽真的是明智选择吗？

跳槽是职场生涯中不可避免的一部分&#xff0c;许多人在考虑是否换工作时&#xff0c;往往会被潜在的高薪所吸引。然而&#xff0c;决定是否接受一个高薪职位的邀请并非易事&#xff0c;它涉及到多个层面的权衡和考量。 我们要认识到薪酬仅是工作回报的一个方面。虽然高薪资往往…
阅读更多...
springboot：java操作docker（docker-java）的基本使用

springboot：java操作docker（docker-java）的基本使用

文章目录 dokcer-java使用xmlping拉取镜像创建容器查看所有容器信息启动容器查看日志删除容器删除镜像 dokcer-java使用 xml 引入依赖 <!-- https://mvnrepository.com/artifact/com.github.docker-java/docker-java --> <dependency><groupId>com.github…
阅读更多...
【漏洞复现】通天星CMSV6车载监控平台Login弱口令漏洞

【漏洞复现】通天星CMSV6车载监控平台Login弱口令漏洞

漏洞描述&#xff1a; 通天星CMSV6车载定位监控平台拥有以位置服务、无线3G/4G视频传输、云存储服务为核心的研发团队&#xff0c;专注于为定位、无线视频终端产品提供平台服务&#xff0c;通天星CMSV6产品覆盖车载录像机、单兵录像机、网络监控摄像机、行驶记录仪等产品的视频…
阅读更多...
智慧物流时代：数字化转型下的物流新篇章

智慧物流时代：数字化转型下的物流新篇章

一、什么是智慧物流&#xff1f; 智慧物流是一种利用先进科技和信息技术优化物流供应链系统的新型模式。以数据为核心&#xff0c;智慧物流通过物联网、云计算、大数据和人工智能等技术手段实现物流信息的全面记录、无缝对接和智能化处理。其核心在于实现物流各环节的精细化、…
阅读更多...
春游江淮 | 遇见花海， 郎溪第二届绣球花卉节即将开启

春游江淮 | 遇见花海， 郎溪第二届绣球花卉节即将开启

郎溪美迪花世界 各种颜色的绣球花海已初露花容 一团团、一簇簇 或淡粉、或淡紫、或淡蓝 以及各种渐变色的花球 景色可谓是浓淡相宜 在暮春时节 2024中国郎溪第二届绣球花卉节 正式官宣啦 郎溪邀您来遇见花海的浪漫 敬请期待吧 活动主题 花开中国梦,绣球美郎川 活动…
阅读更多...
springboot 集成 activemq

springboot 集成 activemq

文章目录 一&#xff1a;说明二&#xff1a;e-car项目配置1 引入activemq依赖2 application启动类配置消息监听3 application.yml配置4 MQConfig.java 配置类5 ecar 项目中的监听6 junit 发送消息 三&#xff1a;tcm-chatgpt项目配置5 MQListener.java 监听消息 测试启动active…
阅读更多...
安卓玩机工具推荐----MTK芯片 简单制作线刷包 备份分区 备份基带 去除锁类 推荐工具操作解析

安卓玩机工具推荐----MTK芯片 简单制作线刷包 备份分区 备份基带 去除锁类 推荐工具操作解析

工具说明 在前面几期mtk芯片类玩机工具中解析过如何无官方固件从手机抽包 制作线刷包的步骤&#xff0c;类似的工具与操作有很多种。演示的只是本人片面的理解与一些步骤解析。mtk芯片机型抽包关键点在于..mt*****txt的分区地址段引导和 perloader临时分区引导。前面几期都是需…
阅读更多...
信息化工作人员必备常识7——DNS【域名解析详解】

信息化工作人员必备常识7——DNS【域名解析详解】

信息化工作人员必备常识7——DNS【域名解析详解】 前言信息化人员必备常识回顾&#xff08;不想看回顾的直接往下滑哦~&#xff09;pingtelnetnslookup命令ipconfig命令域名 DNS为什么需要DNS解析域名为IP地址&#xff1f;域名解析DNS服务器DNS服务器分类表格 DNS客户端DNS中继…
阅读更多...
书生·浦语 大模型（学习笔记-3）茴香豆 --＞ 零代码搭建你的 RAG 智能助理

书生·浦语 大模型（学习笔记-3）茴香豆 --＞ 零代码搭建你的 RAG 智能助理

目录 一、首先了解什么是RAG 二、RAG的工作原理 三、进一步了解&#xff1a;Vector-DB 四、RAG流程 五、RAG的发展进程&#xff08;三种模式&#xff09; 六、RAG的常见优化方法 七、RAG与微调的区别是什么 八、模型优化方法比较 九、评价测试 十、总结一下 十一、…
阅读更多...
网络隔离的最小配置

网络隔离的最小配置

作者&#xff1a;任云康&#xff0c;青云科技研发工程师 前言 对于项目下的网络隔离&#xff0c;有用户提出了以下疑问&#xff1a; 网络隔离是针对 Pod 的吗&#xff1f;网络隔离的最小配置是什么&#xff1f; 配置后&#xff0c;哪些是可以访问的&#xff0c;哪些是不可以访…
阅读更多...
[笔试训练](六)

[笔试训练](六)

016 大数加法_牛客题霸_牛客网 (nowcoder.com) 题目&#xff1a; 题解&#xff1a; 由于相加超过10要进位&#xff0c;因此需要从从后往前将每个数相加得到tmp&#xff0c;超过10时&#xff0c;该位只放tmp%10后的结果&#xff0c;同时将tmp/10&#xff0c;进入下一位的相加…
阅读更多...
冯老师降维打击申论课

冯老师降维打击申论课

冯老师降维打击申论课&#xff0c;以其独到的见解和精湛的教学技巧&#xff0c;将复杂的申论知识变得简单易懂。通过深入浅出的讲解&#xff0c;帮助考生迅速掌握申论精髓&#xff0c;轻松应对考试。课程内容丰富实用&#xff0c;深受考生好评&#xff0c;是备考申论的不二之选…
阅读更多...
观鸟，一场真实世界的宝可梦游戏

观鸟，一场真实世界的宝可梦游戏

点击文末“阅读原文”即可参与节目互动 剪辑、音频 / 卷圈 运营 / SandLiu 卷圈 监制 / 姝琦 封面 / 卷圈 姝琦 产品统筹 / bobo 场地支持 / 声湃轩天津录音间 春天来了&#xff0c;是时候出门观鸟了&#xff01; 如果说城市公园20分钟效应是短暂逃离生活压力的手段。 那…
阅读更多...
一些常见的Windows命令

一些常见的Windows命令

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言看版本号查找端口启动程序杀死某个端口查看全部端口看ip进入目录就是总结 前言 提示&#xff1a;这里可以添加本文要记录的大概内容&#xff1a; 例如&#x…
阅读更多...
MessageBox的模版语法上如何注册事件

MessageBox的模版语法上如何注册事件

目标&#xff1a; 想要在MessageBox中的文本中写一些事件&#xff0c;如何处理 在vue中进行操作&#xff1a; coding // 弹窗提示 this.$confirm({customClass: "add-fail",title: this.$t(add_error),type: error,dangerouslyUseHTMLString: true, // 将消息使用…
阅读更多...
21-22 - 线性表的链式存储结构 单链表的具体实现

21-22 - 线性表的链式存储结构 单链表的具体实现

---- 整理自狄泰软件唐佐林老师课程 文章目录 1. 线性表的链式存储结构1.1 定义1.2 逻辑结构1.3 专业术语的统一 2. 链表的基本概念2.1 单链表中的结点定义2.2 单链表中的内部结构2.3 在目标位置处插入数据元素2.4 在目标位置处删除数据元素 3. 链式存储结构线性表的实现3.1 设…
阅读更多...
Git-Gitlab中如何创建项目、创建Repository、以及如何删除项目

Git-Gitlab中如何创建项目、创建Repository、以及如何删除项目

目录 概念过程创建项目创建Repository创建分支使用IDEA删除项目 git常用命令基础命令拉取远程代码方式一拉取远程代码方式二 概念 GitLab是一个基于Git的版本控制系统&#xff0c;它提供了一个Web界面&#xff0c;可以让用户更方便地进行代码管理、版本管理、协作开发等工作。G…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023