js动态加载HTML元素时出现的无效的点击事件
项目中列表数据中隐藏着详情数据,
图一:
详情数据是:根据当前行的数据作为参数,通过ajax请求到后台返回的数据,再根据返回的结果动态生成HTML页面
图二:
js文件中的这些js的点击事件无效:
js代码:
// 推荐商家点击标题展开与收起
$('.toggle-tag').on('click', function(){
var ele = $(this).parents('tr').next().find('.pro-details');
if(ele.is(':hidden')){
$('.pro-details').slideUp();
ele.slideDown();
}else{
ele.slideUp();
}
});
// 推荐商家点击收起
$('.toggle').on('click', function(){
$(this).parents('.pro-details').slideUp();
});
后面找到原因: 是因为这些动态加载的这些HTML页面(图二),是在列表数据页面(图一)的HTML元素,css,js代码加载完后,再添加的HTML元素,
在浏览器解析到图一的页面元素时, 解析到js的这些绑定标签事件的js代码(上面的JS代码)的时候,这些绑定事件的标签元素还没有生成,
(因为js代码加载完后,才会有这些绑定事件的标签),所以这些JS 代码的绑定的事件,根本就没有绑定到这些动态加载的标签上,所以哪些事件不会触发。
解决方案:
类似动态加载的HTML元素需要绑定事件可以用 jQuery 事件 - delegate() 方法;
-------------------------------------------------------------------------------------
定义和用法
delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。
使用 delegate() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)。
语法
$(selector).delegate(childSelector,event,data,function)
参数 | 描述 |
---|---|
childSelector | 必需。规定要附加事件处理程序的一个或多个子元素。 |
event |
必需。规定附加到元素的一个或多个事件。 由空格分隔多个事件值。必须是有效的事件。 |
data | 可选。规定传递到函数的额外数据。 |
function | 必需。规定当事件发生时运行的函数。 |
亲自试一试 - 实例
- 向未来的元素添加事件处理程序
- 如何使用 delegate() 方法向尚未创建的元素添加事件处理程序。
- -----------------------------------------------------------------------------------------------------------
- 我的解决方案 :(红色代码部分, 其余是别的逻辑代码)
-
/**
* 材价详情显示和隐藏
*/
$("body").delegate(".toggle-tag","click", function(){
//点击再加载材价详情数据
var rowData = $(this).parents('tr').find("td").eq(0).find("input").val();
var row = eval("("+rowData+")");
var id = row.id;
var name = row.stdName;
var spec = row.spec;
var unit = row.unit;
var city = row.city;
var province = row.province;
if($('#detailTr_'+id+'_'+city).find("td").length==0){
var html = std_matpriceLib_list.getMatPriceDetailData(id,row);
$('#detailTr_'+id+'_'+city).html(html);
}
// 推荐商家
$('.business-icon li a').hoverIntent({
over:function(){
$(this).find('.name,.opacity').fadeIn('fast');
},
out:function(){
$(this).find('.name,.opacity').fadeOut('fast');
}
});
var ele = $(this).parents('tr').next().find('.pro-details');
if(ele.is(':hidden')){
$('.hideTr').hide();
$('#detailTr_'+id+'_'+city).show();
$('.pro-details').slideUp();
ele.slideDown();
//获取材价点评统计
// getCommentStatis(id,city);
}else{
$('#detailTr_'+id+'_'+city).hide();
ele.slideUp();
}
loadCharts(id,name,spec,unit,city,province);
}); -
// 推荐商家点击收起
$("body").delegate(".toggle","click", function(){
$(this).parents('.pro-details').slideUp();
$(this).parents('tr').hide();
});
转载于:https://www.cnblogs.com/heganlin/p/5848833.html
js动态加载HTML元素时出现的无效的点击事件相关推荐
- JS动态加载脚本及对动态脚本内方法的调用
JS动态加载脚本及对动态脚本内方法的调用 摘要 JS动态加载脚本及对动态脚本内方法的调用 JS 动态 添加脚本 按需加载 首先我们需要一个被加载的js文件,我在一个固定文件夹下创建了一个package ...
- Selenium一些特殊情况的处理:失去焦点、点击不生效、长页面处理、先触发事件才能动态加载的元素、日期输入
Selenium一些特殊情况的处理 失去焦点focus 有时候click()或者send_keys(),没有反应.那是因为失去了焦点.使用driver. switch_to_active_elemen ...
- 转:JS动态加载JS
JS动态加载JS 1.直接document.write <script language="javascript"> document.write("< ...
- js动态加载css文件和js文件的方法
今天研究了下js动态加载js文件和css文件的方法. 网上发现一个动态加载的方法.摘抄下来,方便自己以后使用 [code lang="html"] <html xmlns=& ...
- 使用DriverManager动态加载JDBC驱动时,报:java.sql.SQLException: No suitable driver found for xxxx 错误
参考文章: yanbin.blog - 自定义类加载器动态加载 JDBC 驱动 项目场景: 使用DriverManager动态加载JDBC驱动时,报:java.sql.SQLException: No ...
- python 爬虫+selenium 全自动化下载JS动态加载漫画
** python 爬虫+selenium 全自动化下载JS动态加载漫画 最近刚学的python,代码可能并不规范,希望大家见谅! 爬取之前,我们首先需要做一些准备工作,因为很多网站都有反爬检索,为了 ...
- QML进阶(十)动态加载QML元素
通过搭配QML和JavaScript我们可以动态的对QML元素的生命周期进行管理.实现动态加载元素.动态实例化元素.动态销毁元素.同时我们还可以将动态创建的元素持久化到本地,并在需要的时候进行恢复使用 ...
- js动态载入css文件,原生JS动态加载JS、CSS文件及代码脚本(示例代码)
var DynamciLoadUtil = { // 动态加载外部js文件,并执行回调 loadJS: function(url, callback){ var script = document.c ...
- Python《突破JS动态加载,成功爬取漫画》
今天就先挑战另外个动态加载的漫画网站,dmzj 漫画太多了,我们先挑选几个漫画下载试一试. 比如我们点击第一部漫画,进去后看看. 这里有很多章节,获得所有的章节这里不难. 接下来我们点击一个章节进去看 ...
最新文章
- 使用元学习和推理改善您的模型!
- 不同版本gene ID比较
- python版本与编码的区别
- 请求编码和响应编码乱码原因及解决方案
- mysql blob 内容查看_这些被你忽视的MySQL细节,可能会让你丢饭碗!
- 打包(归档)和压缩(包含两者的区别)
- 跳转后退_羽毛球后退步法常见问题及解决方法
- js获取url后面的参数值
- jquery读写cookie
- DDD原著 -- 第一章 知识消化
- 2022-2028年全球一次性视频内窥镜行业收入年复合增长率CAGR为 42.6%
- 《数字图像处理》-(3)-2频率域滤波
- 乘S10热销的东风,三星四机齐出再攻中国手机市场
- NVIDIA Jetson TX2 上手指南
- 人力资源数据分析师前景_数据分析师的前途在哪?
- 如何确定Kmeans中的k值
- 【学习 · 求职必备】学CV必须关注的会议与期刊
- 不要再重复造轮子了,Hutool这款开源工具类库贼好使
- flink GROUPING SETS多维度聚合、设置Table state 到期时间
- 好看好玩的韩剧电视- 厄运的恋人