菜单 搜索
首页 前端知识 【blog项目】layui与jquery冲突导致鼠标悬停事件失效、如何调用layui.use()作用域里的方法

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

2024-05-05 22:05:09 前端知识 前端哥 537 863 我要收藏

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事件监听与事件委托（前端小白必学）

转载请注明出处或者链接地址：https://www.qianduange.cn//article/7063.html
标签
layui
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

Blocked opening '' in a new window because the request was made in a sandboxed frame whose 'allow-popups' permission is not set. 报错

2024-05-10 13:05:47

HTML5-新增表单元素

2024-05-10 08:05:59

Dayjs 的一些常用方法

2024-05-10 08:05:59

Howler.js HTML5声音引擎

2024-05-10 08:05:59

HTML5七夕情人节表白网页制作【css3爱心表白背景特效】HTML CSS JavaScript 520情人节代码制作

2024-05-10 08:05:57

前端攻城狮HTML5自查手册

2024-05-10 08:05:51

WebView加载不出Html5网页的解决方法，android studio 拾色器，ViewPager高度问题

2024-05-10 08:05:41

JavaScript 基础入门

2024-05-10 08:05:41

HTML5新手入门指南

2024-05-08 10:05:28

HTML5中SVG与Canvas绘图技术的比较及选择依据

2024-05-10 08:05:10

大家推荐的文章
1

轻松掌握数据库中JSON数据提取：json_extract函数用法详解

2024-05-09 11:05:011000
2

HTML5(六)——Canvas 高级操作

2024-05-09 10:05:191000
3

UE4.27支持HTML5

2024-05-07 13:05:261000
4

前端vue项目使用Decimal.js做加减乘除求余运算

2024-04-23 21:04:401000
5

js数组常用方法（19种）|你会的到底有多少呢？

2024-04-08 11:04:211000
6

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011000
7

ECharts 饼状图颜色设置

2024-02-16 14:02:001000
8

echarts实现动态渲染多柱图

2024-02-12 14:02:341000
9

移动端css布局大全

2024-02-06 15:02:421000
10

使用HTML5和JS实现日期下拉框功能

2024-02-04 11:02:521000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！