解决JQ动态添加的元素点击事件触发不了

最新推荐文章于 2021-11-26 10:18:33 发布
最新推荐文章于 2021-11-26 10:18:33 发布
阅读量2.4k 收藏 1
点赞数 1
分类专栏： JQ 文章标签： jq

先上我出错的代码:


 
 
  1. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     <!DOCTYPE html>
    
    
    
   
   
  2. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     <html>
    
    
    
   
   
  3. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     <head lang="en">
    
    
    
   
   
  4. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
         <meta charset="UTF-8">
    
    
    
   
   
  5. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
         <title></title>
    
    
    
   
   
  6. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
         <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
    
    
    
   
   
  7. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
         <script src="//cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>
    
    
    
   
   
  8. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
     
    
    
    
   
   
  9. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
         <script>
    
    
    
   
   
  10. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
             $(document).ready(function(){
    
    
    
   
   
  11. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     　　　　　　　　//这里是动态添加元素
    
    
    
   
   
  12. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
                 $(".add").click(function(){
    
    
    
   
   
  13. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
                     var btn = $("<button class='newBtn btn btn-default'>新按钮</button>");
    
    
    
   
   
  14. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
                     $("body").append(btn);
    
    
    
   
   
  15. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
                 })<br><br>　　　　　　　　//这里是为添加的元素添加事件
    
    
    
   
   
  16. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
                 $(".newBtn").click(function(){
    
    
    
   
   
  17. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
                     alert("这里是新添加的元素触发的事件");
    
    
    
   
   
  18. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
                 })
    
    
    
   
   
  19. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
     
    
    
    
   
   
  20. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
             })
    
    
    
   
   
  21. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
         </script>
    
    
    
   
   
  22. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     </head>
    
    
    
   
   
  23. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     <body>
    
    
    
   
   
  24. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     <button class=" add btn btn-default">添加按钮</button>
    
    
    
   
   
  25. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     </body>
    
    
    
   
   
  26. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     </html>

奉上我的解决方法，大神们勿喷哦:.
方法一：绑定live事件(live事件只在jquery1.9以下才支持，高版本不支持)。


 
 
  1. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     $(
     
     ".newBtn").live(
     
     "click",
     
     function(){ 
     
     ///jquery 1.9(不包括1.9)以下可以
    
    
    
   
   
  2. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
                    alert(
     
     '这里是动态元素添加的事件');
    
    
    
   
   
  3. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
                })

方法二：利用on（）事件绑定 ($(ParentEle).on("click",".thisEle",function(){}) 


 
 
  1. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     $(
     
     "body").on(
     
     "click", 
     
     ".newBtn", 
     
     function() {
    
    
    
   
   
  2. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
                   alert(
     
     '这里是动态元素添加的事件');
    
    
    
   
   
  3. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
               });

这里的ParentEle是 thisEle的父辈元素或者祖先元素，ParentEle可以是document，也可以是body等.
注意：如果此时调用的函数是外部定义好的函数，那在调用的时候不要加（），不然会跳过点击事件直接触发函数 


 
 
  1. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
      $(
     
     "body").on(
     
     "click", 
     
     ".newBtn",aa );
    
    
    
   
   
  2. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     　
     
     function aa(){
    
    
    
   
   
  3. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
             alert(
     
     '这里是动态元素添加的事件');
    
    
    
   
   
  4. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
       }

yhy822
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
【JQ】动态添加的元素无法触发绑定事件的解决办法
weixin_44707049的博客
10-02 1134
情景 如上面的模态框，点击左边的添加按钮，会把整个div添加到右边，点击右边的删除按钮，则把整个div添加回左边，就类似于穿梭框的样子。 不难，下面是一开始想到的方案： $('#SelectedDevice button').click(function(){ $(this).text('添加'); let this_device = $(this).parent().parent(); this_device.remove();//从待选设备框中移除 $('#DeviceToBeSelect
jquery动态添加元素无法触发绑定的事件的解决方案
偶尔一节
08-30 3065
先上我出错的代码: $(document).ready(function(){ 　　　　　　　　//这里是动态添加元素 $(".add").click(function(){ var btn = $("新按钮"); $("body")
jquery1.9以后代替live的on
郁闷之春的专栏
12-05 294
1.9里live取消了，今天试了下，变成on了 例如我的html文档中已经有了一个id为parent的div，我将要在这个div内部再动态添加一个class为son的span，然后我为这个span绑定一个事件，那么我需要这样写： $('#parent').on('click','.son',function(){alert('test')});...
jquery动态添加元素事件失效问题解决方法
10-25
在示例中，解决动态添加元素事件失效的问题，我们可以将`.x .y`的点击事件绑定改为： ```javascript $(".y").on('click', '.x', function() { // 在这里编写事件处理代码 }); ``` 这段代码会监听`.y`类的所有元素...
jQuery给动态添加的元素绑定事件的方法
12-29
本文实例讲述了jQuery给动态添加的元素绑定事件的方法。分享给大家供大家参考。具体分析如下： jquery中绑定事件一般使用bind，或者click，但是这只能是对已经加载好的元素定义事件，那些后来添加插入的元素则需要...
解决jQuery使用append添加的元素事件无效的问题
10-18
总的来说，解决jQuery `append`添加元素的事件无效问题，关键在于使用`on`方法代替`click`等直接的事件绑定，并将事件处理器绑定到一个固定的、已存在的父元素上，以便处理动态生成的子元素的事件。这种方法不仅解决...
jquery无法为动态生成的元素添加点击事件的解决方法(推荐)
11-29
总结来说，解决jQuery无法为动态生成元素添加点击事件的关键在于理解并使用事件代理。通过将事件监听器绑定到一个静态的父元素（如`document`或更接近动态元素的祖先元素），我们可以确保动态生成的内容也能响应事件...
解决jquery中动态新增的元素节点无法触发事件问题的两种方法
10-23
在jQuery中，动态新增的元素...这两种方法都可以有效地解决动态添加元素的事件绑定问题。根据项目的需求和兼容性要求，你可以选择适合的方法。在实际开发中，使用`.on()`更为常见，因为它在性能和API设计上都更加优化。
html 触发after,关于伪类after后续追加，实现js事件（如点击事件）
weixin_33040687的博客
06-15 1948
实现情况为：点击“编辑”后，“编辑”文字变成“完成”，再点击伪类元素后的“完成”，此时的“完成”应该变成“编辑”情况描述为：如果用伪类实现，点击“编辑”后变成“完成”，再点击“完成”，无反应原因排查为：原“编辑”和后“完成”是同一个span，只是不同类名，但后续动态追加的类名，无法实现点击【语言烦躁，来示例吧】html：.edit{after:"编辑"}.complete{after:"完成"} ...
jQuery给动态添加的元素加点击事件失效的原因以及解决办法
qq_44782585的博客
02-21 1755
一、问题描述 　　用jQuery的append()方法动态添加了一段html代码之后，发现在为新添加的元素绑定click事件时无法获取该新元素。 二、解决方法 使用jQuery的on（）方法添加元素。 三：具体代码 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>jQuery on()方法测试</title>...
解决vue中给button按钮添加点击事件，事件不生效问题。
热门推荐
Banality_human_workers的博客
06-15 1万+
解决vue中给button按钮添加点击事件，事件不生效问题。 话不多说，直接切入正题： 我们在开发中是不是经常会遇到给button或者input添加click事件，但是methods中却不走这个事件的问题呢？ 我找了很多文档，跟button本身是没有关系的。 话不多说 看代码： <div class="parentbox"> <div class="childbox"> <button @click="addEvent">测试</but
JQuery触发元素事件
lchyz89的专栏
09-20 1615
在js中，如果我们要触发一个按钮的点击事件，直接使用元素的onclick事件，然后调用相关函数就可以了，这样的 写法则是让代码与html结合到一起了，在Jquery中就不用这样了，它有另外的几种写法，可以使代码与html分开：    比如页面中有一个按钮：    我们要触发它的点击事件可以有下面两种方式：    一:jQuery(function($){         $("#btn")
JQuery 动态生成元素添加点击事件
sayyy的专栏
11-26 7946
页面代码 <html> ... <body> <div id="divBox"></div> <script> $(function(){ $("#divBox").append("<img class='preview_image' src='/img/preview1.jpg' />"); $("#divBox").append("<img class='preview_image' src='/img/pre
jQuery的.bind()、.live()和.delegate()之间区别
weixin_30339457的博客
06-07 146
DOM树 首先，可视化一个HMTL文档的DOM树是很有帮助的。一个简单的HTML页面看起来就像是这个样子： 事件冒泡(又称事件传播) 当我们点击一个链接时，其触发了链接元素的单击事件，该事件则引发任何我们已绑定到该元素的单击事件上的函数的执行。 1 $('a').bind('click',function(){alert('that tickles!')...
Jquery系列-Jquery动态创建dom、attr的使用
SDN_SUPERUSER的专栏
10-29 1057
无标题页 //动态创建dom $(function(){ var link = "百度" $('div').click(function(){ $('div:first').append(link); }); //$('a:first').attr("href","http://www.123.com"); //removeAttr 删除属性 }); va
用Jquery的attr方法动态添加JSON对象参数
duanghuang的博客
01-24 1523
var jdata = {}; var inname='name'; var val = 'value' $(jdata).attr(inname,val); 就可以向json追加元素了。 或者eval("jdata."+inname＋"="+val)，JSON.parse等其它方法 但是删除只能用eval("delete jdata."+inname)。 原文地址：http:
jQuery动态添加的列表项无法触发点击事件
漓涂
07-24 2604
1.添加列表项之前，点击1，2，3都能出发点击事件。 2.点击“添加列表项按钮”，实现如下： 这时点击1，2，3还是能触发点击事件，但是点击动态添加的4，5节点时却无反应。 此时代码如下： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &
jq动态为div添加触发事件
最新发布
05-31
例如，如果你想为id为myDiv的div元素添加点击事件，可以使用以下代码： ```javascript $('#myDiv').on('click', function() { // 在这里添加触发事件的代码 }); ``` 你可以将上面的代码放在页面加载完成后执行的...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值