利用事件委托解决js元素添加后未响应绑定事件问题

1.情景还原

html

<ul id="Container">
<li class='divclick'><span><em>1</em></span></li>
<li class='divclick'><span><em>2</em></span></li>
<li class='divclick'><span><em>3</em></span></li>
</ul>
<button id="add">添加</button>

js
$(".divclick").click(function(){
console.log(2);
})
$("#add").click(function(){
htmlstr="<li class='divclick'><span><em>4</em></span></li>"
$('#Container').append(htmlstr);
})

*在button添加第四个li元素之后，之前绑定的事件没有执行。

*利用事件委托，将事件绑定在父元素上

$("#Container").click(function(ev){
　var ev = ev || window.event;
var target = ev.target || ev.srcElement;
console.log(2);
if (target.nodeName.toLowerCase() == 'em') {
var index=$(target).parents('li').index();
console.log(index);
}
})
$("#add").click(function(){
htmlstr="<li class='divclick'><span><em>4</em></span></li>"
$('#Container').append(htmlstr);
})