JS动态append之后点击事件无效

今天做项目用了append向HTML里面添加结构代码,代码添加之后,单击事件就没反应了。搞得我一脸懵逼,调了代码很久实在不行,我百度了一下才发现,append添加的节点单击事件是不会生效的。

原因:

原来append中的节点是在整个文档加载后才添加的,页面并不会为未来的元素初始化添加点击事件,所以使用这种方式动态添加的节点中的点击事件不会生效。

解决方法:

于是我只好改用事件代理来完成这次我的项目,把这次经历发在上面存一下档了,希望下次能记住。

HTML代码:

<main class="container" style="margin-top: 50px;margin-bottom: 50px">
    <div class="row content" id="content">

    </div>
</main>

append的代码:我把下面这段代码,加在content里面

  $(‘#content‘).append(`
       <div class="col-md-6">
          <img src="img/cart.png" class="addcart">
       </div>
       <div class="col-md-6">
           <img src="img/buy.png" class="buy">
       </div>
 `);

最终效果:

事件代理:

思路:因为最开始他们共同的父级content是在HTML结构中的,所以将两个单击事件代理给content,通过单击获得的class名来判断点击的是哪一个对象,再进行具体操作

$(‘#content‘).on(‘click‘,function (e) {
  var target=e.target||e.srcElement;//获取当前点击的对象
  var cls=target.className;//获取当前点击对象的class名
  if(cls===‘addcart‘){//如果点击的是加入购物车
      console.log(‘addcart‘)
  }else if (cls===‘buy‘) {//如果点击的是立即购买
      console.log(‘buy‘)
  }
});

原文地址:https://www.cnblogs.com/xyyl/p/10988501.html

时间: 2024-10-07 15:00:05

JS动态append之后点击事件无效的相关文章

jQuery on()方法绑定动态元素的点击事件无效

之前就一直受这个问题的困扰,在jQuery1.7版本之后添加了on方法,之前就了解过,其优越性高于live(),bind(),delegate()等方法,在此之前项目中想用这个来测试结果发现,居然动态生成的标签点击了没反应,而live方法却能够支持,于是乎到处查资料,问网友,结果找了好久在一篇文章中终于找到了答案... jQuery 使用on绑定动态生成的元素时,不能直接用该对象操作,而是选择其非动态生成的父节点然后再找到本身才能达到效果.大家看看源码就知道了.生成的按钮基数项on方法点击无效l

js,css随笔(动态生成的dom做点击事件无效)

1.动态生成的DOM做点击事件无效   https://blog.csdn.net/mm_hello11/article/details/79010679 2.消除button的默认样式 margin: 0; padding: 0; border: 1px solid transparent; //自定义边框 outline: none; //消除默认点击蓝色边框效果 3. 键盘按下事件 $("#btn").keydown(function(event){ if(event.keyCo

动态生成的DOM做点击事件无效

有时候我们的标签都是从后台获取的数据,然后利用JS添加到页面上,当我们写生成的标签的点击事件(click)时没有效果. 例如: <section> 测试动态生成的DOM点击事件 <br /> </section> <script src="jquery-1.11.2.min.js"></script> <script> $(function () { $.ajax({ type: "post",

对于页面动态加载的元素事件无效的解决方案

当用ajax动态获取的数据放在新建的div中进行展示时,当你提前写一些 mouseover,click 操作时会发现不起作用 解决方法: 把事件绑定到它的父元素上面 例如,每次读到数据会将它放在新建的 class = data的div中显示,并且用append方法把他添加在 id= parent 的div中.这个时候假如对data这个块有点击事件,平常可能会写 $('.data').click(function(){...}); 当点击这个div时,不会有反应.这时候可以再一开始将事件绑定到父元

关于jQuery中动态生成的点击事件触发两次的讨论

由于是动态生成的  点击事件运用了jQuery里面的on()方法,绑定在body上面,结果在程序里面运行了两次.参考了博客 利用on和off方法编写高效的js代码知道了很多在dom对象删除以后,其声明的绑定在window上的事件还一直存在,导致相同的功能代码执行了几次.故使用之前要清理掉body上绑定的click事件,利用了jQuery里面off()方法. $('body').off('click').on('click','selector',function(){});

Android 7.0 TextView点击事件无效修复方案

public class PostTextView extends TextView { private Handler handler = new Handler(Looper.getMainLooper()); public PostTextView(Context context) { super(context); } public PostTextView(Context context, AttributeSet attrs) { super(context, attrs); } p

ListView的item中有button和checkbox,listview的点击事件无效

ListView的item中有button和checkbox,listview的点击事件无效,解决办法: 在item布局文件中的根控件中添加属性设置: android:descendantFocusability="blocksDescendants" 如果只能点击checkbox,而无法触发item的点击事件,那么可以禁掉checkbox的焦点获取,不让它可以点击就可以了 checkbox里面加 android:focusable="false" android:

用到afinal注解的项目代码混淆后某些控件view点击事件无效问题

最近一个项目上线,要求代码混淆,可混淆后某些控件的点击事件无效,后来发现是afinal注解的问题.查了半天资料,后来又问了afinal的相关人员,他们给出的解决方案是排除混淆被注解的类,这样的话意味着基本所有的activity和fragment都不能混淆,这不是我想要的. 后来反编译代码比较排除被注解的类和不排除被注解类的区别,比较发现,那些不能点击的控件的定义代码被优化掉了,被优化掉的原因就是因为用注解后,在代码中该控件的实例没有其他地方用到,所以程序就认为该代码没有被用到,就被注视掉了. 知

ios 最新系统bug与解决——微信公众号中弹出键盘再收起时,原虚拟键盘位点击事件无效

最近ios发布新版本系统12.1,随着部分用户的系统更新,一些问题也渐渐暴露出来... 公司用户反映微信公众号出现了点击无效的bug!!测试调查发现,只有iphonex.iphone6,ihpone7等部分机型会出现该问题 我当时就是一惊,一般出现在事件上的问题都是疑难杂症.何况是跟键盘相关的. 我们都知道在H5端是没法监控键盘的弹出与收起的,resize事件触发的机型极其有限,何况我在ios中实测没有触发,安卓反而可以.因为安卓弹起键盘时会修改视窗的大小,但是ios并不会,如果你在ios上设置