意外解决js动态生成的html代码中一些事件失效问题

最新推荐文章于 2023-02-21 19:42:42 发布
最新推荐文章于 2023-02-21 19:42:42 发布
阅读量5.5k 收藏 1
点赞数 2
分类专栏： WEB 文章标签： js失效

做一个页面功能，用ajax实现查看更多的效果。当用户浏览到最后，点击查看更多再追加一页的数据到最后。

当然是用javascript更改html内容，把一页的数据html追加到后面。然后追加的代码中有一个class属性，这个属性将由一段javascript代码控制显示与否。可是追加出来的数据却没有这个效果。通过F12查看生成的HTML代码，与有效果的无异。查找资料知道产生这个问题的原因是由于HTML都是页面首次加载生成的，javascript也是页面初次加载进来的。而通过点击事件动态追加的HTML代码可能不受影响。在纠结之后，突然想到，从javascript中找到根据class属性控制的代码，COPY一份放到追加HTML代码的后面。也就是说，每次追加更多内容以后，再重新定义一次js事件。刷新页面，测试，效果有了！！！！

谨以此文，码下，以饷后人



遇到如上问题,实测有效!

原文地址:http://www.tuicool.com/articles/BB3Iv2a

html+css+js基础问答
qq_43751465的博客
08-26 5231
css3 1.标签语义化 顾名思义，合理的标签干合适的事情 块级（display：block）：div 、p、h1~h6、hr、ul、ol、li、dl、dd、form、table、header、footer、main、nav、sector、arcitcle、pre、table、tbody、thead、th、tr、tfoot 行级（display：inline）：a、span、small、strong、em、i、code、 行内块（display：inline-block）：img、input 区别： 1.
webpack 缓存问题处理解决与性能优化方案
小青蛙的博客
06-20 2608
webpack 缓存问题处理解决方案 导读 在该篇博文中，我们将逐步实现文件hash后缀的输出，修改某个文件，才会对应输出修改该文件的hash后缀，同时满足性能优化，客服端服务端代码同步更新 项目地址：https://github.com/RiversCoder/webpack-test 官网介绍 在之前的指南案例中，我们使用 webpack 来打包我们的模块化后的应用程序，webpack 会生...
js 生成的html class属性失效问题
weixin_30764883的博客
10-27 720
var html = '<fieldset class="struct-info" id="SlopeZY"><legend>变坡点(ZY)</legend>'; html += '<input type="hidden" id="SlopeZYId" name="SlopeZYId"/>'; ...
无效HTML代码是什么？
rayho的专栏
08-31 2081
无效HTML代码是什么？从字面意思来看，“无效”就是“没有效果”的意思，无效代码是由于标签元素书写错误、标签元素没有闭合等原因，造成页面无法显示或者显示不正常的代码。下面举几个无效HTML代码的例子：将写成 本来应该是52xingyongpinhttp://www.52xingyongpin.com">52xingyongpin>，却写成了href="52xingyongpin">ht
jquery append()方法生成的html代码中class属性失效，点击无法触发事件
weixin_30839881的博客
06-14 1219
可以通过以下两种方式获取指定元素，从而达到事件响应的效果！$("body").on("click", ".className", function () {　　....});或者$(document).on("click", ".className", function () {　　....}); 转载于:https://www.cnblogs.com/renmengkai/p/9183878.h...
layui-点击时间无效-由js进行渲染HTML进行事件监听无效的解决方法
A88552211的博客
07-01 417
只监听一个元素（如按钮） 使用 $(document).click('#id名或.class名',()={ 事件操作 }) 如果需要监听多个同类名的事件 注意：typemin是你要监听被点击事件中同类名的，typeminList是typemin的父元素的类名，d.target当前被点击元素 $(document).click((d) => { let _this = d.target if(d.target.className.ind...
v8引擎处理html,JavaScript V8引擎基础教程
weixin_31499919的博客
06-04 995
本篇教程介绍了JavaScript V8引擎基础教程，希望阅读本篇文章以后大家有所收获，帮助大家对JavaScript的理解更加深入。<一、浏览器内核—渲染引擎渲染，就是根据描述或者定义构建数学模型，生成图像的过程。浏览器内核主要的作用是将页面转变成可视化/可听化的多媒体结果，通常也被称为渲染引擎。将HTML/CSS/JavaScript文本及其他相应的媒体类型资源文件转换成网页。上图中实线...
javascript面试题大全_Js基础面试题（附答案）
最新发布
m0_64460287的博客
02-21 2243
因为cookie有域的限制，因此不能跨域提交请求，故使用非主要域名的时候，请求头中就不会带有cookie数据，这样可以降低请求头的大小，降低请求时间，从而达到降低整体请求延时的目的。是加粗的，不要认为这是html的表现，这些其实html默认的css样式在起作用，所以去掉或样式丢失的时候能让页面呈现清晰的结构不是语义化的HTML结构的优点，但是浏览器都有有默认样式，默认样式的目的也是为了更好的表达html的语义，可以说浏览器的默认样式和语义化的HTML结构是不可分割的。
前端面试-JavaScript
wanglu458512的博客
09-19 468
一、数据类型 JavaScript有哪些数据类型，它们的区别？ 7种原始数据类型：undefined\boolean\number\string\bigInt\symbol\null，前6种使用typeof运算符检查，特殊的null使用其检测结果为object； 3种引用数据类型：对象、数组、函数 区别： 原始数据类型直接存储在栈（stack）中的简单数据段，占据空间小、大小固定，属于被频繁使用数据，所以放入栈中存储； 引用数据类型存储在堆（heap）中的对象，占据空间大、大小不固定。如果存储在栈中，将会影
html追加问题,jQuery添加的HTML，JS失效的问题。
weixin_33109551的博客
06-02 167
如下图所示， 点击添加后，会新添加一行，但是二级联动就失效了，$('.provinceList').live('change', function(){var provinceId = $(this).val();var obj = $(this);$.post('/yuyue/ajaxCityList', {'provinceId':provinceId}, function(list){va...
在动态添加的HTML代码块上JS写的方法不起作用。
qq_44217121的博客
11-26 876
错误写法 $("#headtops").append(" <li id='user' lay-id='user' class='layui-this'><span class= 'layuimini-tab-active'></span><span>用户信息管理</span><i id=‘remove’class='layui-icon layui-unselect layui-tab-close'>ဆ</i></.
通过html追加页面元素后， 绑定的js无效
pz641的博客
11-27 921
是因为这些动态加载的这些HTML页面，是在列表数据页面的HTML元素，css,js代码加载完后，再添加的HTML元素， 在浏览器解析到静态的页面元素时， 解析到js的这些绑定标签事件的js代码（上面的JS代码）的时候，这些绑定事件的标签元素还没有生成， （因为js代码加载完后，才会有这些绑定事件的标签），所以这些JS 代码的绑定的事件，根本就没有绑定到这些动态加载的标签上，所以哪些事件不会触发。 ...
html页面动态添加的内容js不生效问题解决
ttphoon的博客
10-25 3686
html动态生成后，之前定义的jqeury方法不起作用 html动态添加内容是很常见的，遇到了好几次，然后有去找了一下知道了解决办法，但是一段时间没用有点模糊，特意做个记录。 解决办法 $(document).on("operation","element",function(){ //do something }) 示例1: $(document).on("click",".edit-gp"...
jquery事件 对Html网页动态生成后，事件失效
Json_Marz的博客
03-31 547
//动态生成html $("#a").html("<input type='text' id='b' />"); //绑定事件 $("#b").on("blur", function(){ alert("动态html"); }); //发现事件失效；修改成 $(document).on("blur", "#b", function(){ alert("动态...
js 动态添加 html 无法调用 js方法问题 解决方案
All of my life is programming!
07-20 1539
js 动态添加 html 无法调用 js方法问题 解决方案 动态添加的 html 代码无法通过 onclick 方式调用 js 方法。 如： <script> $('#sync_error').append('<button onclick="get_position('+data['ret']['account_name']+')"> 失败重试：'+data['ret']['account_name']+'</button>'); </script> 上面
动态生成html ，绑定js事件
weixin_33725270的博客
07-01 152
为什么80%的码农都做不了架构师？>>> ...
js首次修改html无效,浅谈jQuery添加的HTML,JS失效的问题
weixin_30044149的博客
06-03 733
浅谈jQuery添加的HTML,JS失效的问题如下图所示，点击添加后，会新添加一行，但是二级联动就失效了，$('.provinceList').live('change', function(){var provinceId = $(this).val();var obj = $(this);$.post('/yuyue/ajaxCityList', {'provinceId':provinceI...
前端html引入的js文件无效,手把手教你如何在HTML中引入外部JS文件_WEB前端开发...
weixin_35863455的博客
06-03 831
5种你一定不知道的HTML空格表示方法_WEB前端开发HTML提供了5种空格实体(spaceentity)，它们拥有不同的宽度，非断行空格是常规空格的宽度，可运行于所有主流浏览器。其他几种空格在不同浏览器中宽度各异。在学习前端的时候，小伙伴们一定对于在HTML中如何引入外部JS文件感到困惑，下面小编教你HTML引入外部JS文件的方法。在引入外部JS文件的情况下，不能在之间插入代码，插入的代码不执行...
使用Javascript让某个HTML区块的链接失效
windonly
10-15 440
在开发中时常会遇到这样的需求:让某些描述信息(这些描述信息已经进行过安全html过滤,所以不会包含Javascript等脚本语言,但是允许正常的链接)里的链接失效,但是不要或者这些描述信息.如要以下代码块里的链接失效 &lt;div id="desc"&gt;    &lt;a href="http://www.9i56.cn"&gt;无聊网&lt;/a&gt; &lt;/div&gt; 只需要...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值