码迷,腾讯三分彩 www.csbesbj.com
腾讯三分彩 > 移动开发 > 详细

www.e00.com:JS动态append之后点击事件无效

时间:2019-06-07 16:45:37      阅读:84      评论:0      收藏:0      [点我收藏+]

腾讯三分彩 www.csbesbj.com 标签:images   百度   开始   完成   通过   使用   点击   view   ott   

今天做项目用了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‘)
  }
});

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

标签:images   百度   开始   完成   通过   使用   点击   view   ott   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
? 2014 腾讯三分彩 www.csbesbj.com 版权所有 京ICP备13008772号-2
迷上了代码!