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