【JS】$().click事件触发不了

JS代码:

var tpl = "<li>" +
    "<span class='time'>" +
    "<span class='kaishi'>" + timestart + "----</span>" +
    "<span class='jieshu'>" + timeend + "</span></span>" +
    "<span class='edit glyphicon glyphicon-edit'></span>" +
    "<span class='delete glyphicon glyphicon-trash'></span>" +
    "</li>";
    $('#sometime').append(tpl);
        
   $(".edit").click(function () {
        alert(1);
    });

但是我点击class = "edit" 的span 标签 不会触发


哎呀,怎么又是这种问题呀。。。

  • 先说说点击不了的原因:

  • 很简单,因为jq找不到.edit这个类!事情是这样的,虽然说js是边读边执行的,但是并不是真的边读边执行的。众所周知,浏览器里面有两个线程,一个是渲染的,一个是js的,当渲染的线程工作的时候,js的线程是在休息中的,同样,js线程工作的时候,渲染线程就在睡懒觉!

  • 而js是这样读你的代码的:哦,插入一个这样这样的li,好的,等会我下班通知一下渲染哥让他把li插入html里面。然后他继续读到,恩,找一个名字叫.edit的类,给它绑定这样这样的事件,好,我去html文档里面找找看,哎呀,居然没有啊,没有就算了,呀,后面没代码了?太好了下班了,渲染哥,该你上班了。。。。然后渲染哥一上班,就接到js哥的将li插入html文档的要求,渲染哥就放了一个魔法,将li插入进去,然后更新html文档,然后局部重新布局。

  • 所以jq找不到'.edit',这个没办法,因为js读到这个click事件的时候,它还没有在文档里面。。。所以,不知者无罪嘛。。。

  • 那说说解决办法,肯定是事件委托啊:

$(document).on('click','.edit',clickEventFunction);
  • 这里再啰嗦几句,如果这样写的话,那js是这样读的:document被点击的时候,看看是不是这个.edit的类被点击了,是的话执行这个clickEventFunction,恩,这个简单啊,渲染哥啊,待会要是有人点击了document,而且是点击了document下的这个类啊,就大声叫我起床,我要干点什么!

  • 这样的话,不管你要插入的类是否在文档里面,被点击的时候都会唤醒js线程,一旦存在,js就会去处理点击事件。

  • 不过我还是推荐下面这种写法:

  function $domOfSth(text){
      var $obj=$('<li>..<span class="edit">'+text+'</span>..</li>');
      $obj
          .on('click','.edit',clickEventFunction)
          .on('mouseover','.otherClass',hoverEventFunction)
          ...
      /*甚至还可以帮他写点样式什么的*/
      $obj.css('color','red');
      return $obj
  }
  • 这样可以一次性将事件绑定到你要插入的对象里面,而且一目了然,可读写可维护性都不错。

From:https://segmentfault.com/q/1010000006801225

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,637评论 25 708
  • 前端开发面试知识点大纲: HTML&CSS: 对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功:...
    秀才JaneBook阅读 2,570评论 0 25
  • 【原文】林放问礼之本。子曰:“大哉问!礼,与其奢也,宁俭;丧,与其易也,宁戚。” 【译文】林放问礼的根本。孔子说:...
    转念馆阅读 2,280评论 0 2
  • 重庆市红十字会首次试水网络众筹​,获得了绝大多数人的支持和肯定,也遭遇了少数人的误解和诋毁。重庆市红十字会具有公募...
    浪尖的石头阅读 275评论 0 0
  • 你说城市太混浊, 凡尘,蒙蔽了你的双眼。 你说世界太多端, 路灯,迎错了你的方向。 你说世界太繁杂, 霓虹,迷乱了...
    隔江误听阅读 1,245评论 0 1