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
}
- 这样可以一次性将事件绑定到你要插入的对象里面，而且一目了然，可读写可维护性都不错。
