jquery事件对Html网页动态生成的元素失效

最新推荐文章于 2019-07-30 23:47:49 发布

iamsharleen

最新推荐文章于 2019-07-30 23:47:49 发布

阅读量1.9k

点赞数

分类专栏： java学习笔记文章标签： jquery html javascript

本文链接：https://blog.csdn.net/u014755543/article/details/49684889

版权

java学习笔记专栏收录该内容

6 篇文章 0 订阅

订阅专栏

在网页中有几个a标签，一部分静态写在html中，一部分则是动态生成。

<body>
<div id="btns">
    <a href="javascript:void(0);" class="shareBtn" style="visibility: visible;">分享到+</a> 
    <a href="javascript:void(0);" class="shareBtn" style="visibility: visible;">分享到+</a> 
<div>
</dody>

js代码

//动态生成
$("#btns").append('<a href="javascript:void(0);" class="shareBtn" style="visibility: visible;">分享到+</a> ');
//点击事件
$(".shareBtn").click(function(){
    alert("share!");
});

动态生成的a标签点击后并没响应，解决方法：

$(document).on('click','.shareBtn',function(){
    alert("share!");
});

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

iamsharleen

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery事件对Html网页动态生成的元素失效

在网页中有几个a标签，一部分静态写在html中，一部分则是动态生成，动态生成的元素点击事件失效
复制链接

扫一扫

专栏目录

浅谈jQuery添加的HTML,JS失效的问题

11-22

总结来说，要解决jQuery动态添加HTML后JS事件失效的问题，可以使用`.live()`（已弃用）或`.on()`方法来绑定事件，特别是对于动态生成的元素。`.on()`提供了更优的性能和更好的灵活性，是现代jQuery应用中的首选方案...

解决layui中onchange失效以及form动态渲染失效的问题

10-16

然而，在实际使用过程中，开发者可能会遇到一些意料之外的问题，比如onchange事件失效和form动态渲染失效。本文将详细探讨这两个问题的解决方案。首先，我们来看`onchange`事件失效的问题。在jQuery中，我们通常会...

参与评论您还未登录，请先登录后发表或查看评论

jquery html() 方法不成功的原因

11-03

258

最近用CI 有段时间了，渐渐理解了CI是怎样运作的，也渐渐理解了MVC框架，感觉到得心应手，心里不免有点开心，觉得自己是项目的中坚力量了。但是，现实总喜欢给我当头一棒。做一个简单的功能之后，我写的另外一个页面变成空白的了！那个功能的确非常简单，只是提供了更改密码，并且将数据库的内容显示到页面上，做了没有8次也有7次了。闭着眼睛也能写啊！我首先怀疑那个空白页面的数据库出问题了。但是我打印数据

js自动生成的元素与页面原有元素发生堆叠

code旅行者的专栏

07-12

1014

商品属性和商品规格是js动态生成的元素，商品扩展信息的两个文本框是原有的元素，他们发生堆叠，我以为是我生成的元素所在div大小不固定导致的，因为商品规格的下面复选框是第二次ajax生成的，我怀疑第二次ajax是不是不能将页面原有元素向下推到合适的位置。搞了几个小时，尝试固定元素所在容器div的的大小，但是不好固定啊，元素的个数是不定的，尝试改变属性和规格的生成顺序，属性部分堆到规格部分上去了，

jQuery动态生成html元素的几种方法

joe_dev的博客

12-14

8326

本文实例讲述了jQuery动态创建html元素的常用方法，在使用jQuery进行WEB程序设计的时候非常有用。分享给大家供大家参考。具体方法如下：一般来说，可以通过以下几种方式动态创建html元素： 1、使用jQuery创建元素的语法 2、把动态内容存放到数组中，再遍历数组动态创建html元素 3、使用模版 1.使用jQuery动态创建元素追加到jQuery对象

用jQuery创建HTML中不存在的标签元素碰到的问题

weixin_30337157的博客

07-30

284

如果你自定义了一个标签，比如<aaa></aaa> 用jQuery的写法，比如var custom_element = $('<aaa class="ee"></aaa>'); 生成对象是没有问题的，但是如果向对象中添加元素比如 custom_element.append('<div>ok</div>')，在IE8下就会抛...

jquery 动态增加的html元素，初始化设置在id或class上的事件无效

ChristianSonic008的专栏

01-19

931

一般情况，我们会在页面初始化完成后对class定义一些全局事件，举个例子： $(function() { $(".bot").on("click", function() { alert("977"); }); 正常情况下，这样的写法是正确的。可是往往当我们需要通过jquery动态的添加一些html元素到界面时，会发现定义的全局方法对新增元素无效了，举个例子：

解决jQuery使用append添加的元素事件无效的问题

10-18

总的来说，解决jQuery `append`添加元素的事件无效问题，关键在于使用`on`方法代替`click`等直接的事件绑定，并将事件处理器绑定到一个固定的、已存在的父元素上，以便处理动态生成的子元素的事件。这种方法不仅解决...

jquery word export 导出html内容(包括图片)

12-03

在实际应用中，你可能会使用动态生成的HTML，比如从数据库获取的数据。为了触发导出功能，可以添加一个按钮或者其他交互元素，然后为其绑定一个点击事件。在事件处理函数中，调用jQuery Word Export提供的API来...

jQuery生成asp.net服务器控件的代码

10-29

由于***页面在加载和处理时有其特定的生命周期，通过jQuery添加的服务器控件可能没有经过正常的生命周期事件，从而导致控件失效。 5. 最后，描述中提到的JavaScript错误处理也是导致控件无法正常工作的原因之一。...

jq动态生成HTML元素时，点击事件无效

siyi_blog的博客

07-01

4171

第一次写，作为自己的一个学习笔记。原因：动态添加的HTML元素是在CSS，JS代码加载完成后再添加的HTML页面。在浏览器解析这些通过ajax请求到后台返回的数据,再根据返回的结果动态生成HTML页面时，这些绑定事件的标签元素还没有生成。而普通.click事件只能绑定静态元素。用on方法支持动态绑定元素。解决方案：将普通事件改为.on（）委托事件示例：普通绑定事件：$('.btn1').clic...

js 生成的html class属性失效问题

weixin_30764883的博客

10-27

719

var html = '<fieldset class="struct-info" id="SlopeZY"><legend>变坡点(ZY)</legend>'; html += '<input type="hidden" id="SlopeZYId" name="SlopeZYId"/>'; ...

JS动态插入HTML后不能执行后续JQUERY操作

weixin_34015336的博客

04-13

391

通过js追加的html 发现不能点击执行函数普通绑定事件：$('.btn1').click(function(){}绑定事件委托解决方法： $("body").delegate(".class","click",function(){}); on绑定事件：$(document).on('click','.btn2',function(){}绑定文章来...

Ajax动态拼接HTML，JS失效------解决方法

qq_34783484的博客

05-12

5036

$("父元素").on("click","子元素",function(){ //执行代码 })$('#grade').on('click',"a", function () { $("#grade a").removeClass("active") $(this).addClass("active"); $('#subPag

用Jquery动态方式加入标签时 css样式丢失的解决方法

hlvy

07-18

5458

在用到原生javascript 或 jquery 加入标签时有时会因为某些原因比如css内容过多的时候这种情况下新加入标签的css样式会丢失在进行了一些摸索后找到了解决方案: 一般在Jquery中会用下面的方式来添加新标签： var obj = "<div class="mhn-item" style="height:470px;"> ...

解决jquery异步返回html代码后，jquery事件失效的问题

weixin_33739627的博客

03-25

342

========================异步返回html代码$(".course_right_div1 .ul1 li").click(function(){ $(this).addClass("xuanzhong").siblings().removeClass("xuanzhong"); var $subject= $(this).text(); $.get("....

如何使用jquery.qrcode.min.js生成一个二维码，并且扫描二维码后，二维码自动失效，请给出完整html代码