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

最新推荐文章于 2021-06-19 02:08:13 发布

iamsharleen

最新推荐文章于 2021-06-19 02:08:13 发布

阅读量1.9k

点赞数

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

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

6 篇文章

订阅专栏

本文讨论了在网页中动态生成a标签时遇到的点击事件无法响应的问题，并提供了解决方案，通过使用$(document).on('click','.shareBtn')来确保动态生成的a标签能够正确响应点击事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在网页中有几个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
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

jQuery绑定动态元素的点击事件无效

丹

01-16

577

之前就一直受这个问题的困扰，在写ajax加载数据的时候发现，后面追加进来的demo节点元素，失去了之前的点击事件。为什么点击事件失效，我们该怎么去解决呢?那么，我们通过下面的示例简单说明。示例如下： <div> <ul id="demo"> <li>Kubernetes：下一代分布式系统的护戒使者</li> <li&g...

jQuery添加的HTML，JS失效的问题。

大道泛兮

02-05

1867

如下图所示，点击添加后，会新添加一行，但是二级联动就失效了， $('.provinceList').live('change', function(){ var provinceId = $(this).val(); var obj = $(this); $.post('/yuyue/ajaxCityList', {'provinceId':provinceI

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

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

11-03

300

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

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

code旅行者的专栏

07-12

1067

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

jq 增加html表单,JQ中动态增加form以及参数提交的问题

weixin_29215391的博客

06-19

721

form的html结构`拍摄点名称经度纬度代表性照片四方位照片:东四方位照片:北四方位照片:西四方位照片:南全景照片`点击新增按钮的时候下面的表单以及字段会新增一套问题1.使用append的话是在 div class panel-body 下append一个新的form呢还是在form下 apeend 各个input呢新增的时候 input元素的 name value 需要加索引吗2.因为...

html动态生成按钮事件无效,jQuery动态添加元素无法触发绑定事件的解决方法分析...

weixin_32074113的博客

06-09

627

本文实例讲述了jQuery动态添加元素无法触发绑定事件的解决方法。分享给大家供大家参考，具体如下：最近遇到一个问题，即当用jquery动态添加元素后，发现给动态添加的元素却无法触发事件。后来在网上查阅了一些资料，发现原来要这样处理：先上我出错的代码:$(document).ready(function(){//这里是动态添加元素$(".add").click(function(){var btn ...

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

joe_dev的博客

12-14

8465

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

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

10-18

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

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

11-22

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

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

10-16

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

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

12-03

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

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

weixin_30337157的博客

07-30

327

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

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

ChristianSonic008的专栏

01-19

988

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

EasyUI 关于js动态添加的时候样式失效的问题