Edit in JSFiddle

$(document).ready(function(){
    
        var eleSize = 10;
        //增加初始化元素                
        var innerHtml = "<ul>";
        for(var i=0; i<eleSize; i++){
            innerHtml += "<li>第 "+i+" 个</li>";
        }
        innerHtml += "</ul>";
        document.getElementById("leftCon").innerHTML = innerHtml;
        document.getElementById("rightCon").innerHTML = innerHtml;
        
        //事件绑定
        $("#leftCon").find("li").click(function(){
            alert($(this).html());
        });

        //事件委托
        $('#rightCon').delegate('li', 'click', function() {
            alert($(this).html());
        });
        
        //为事件绑定的增加元素
        $("#left .btnNew").click(function(){
            $("#leftCon ul").append("<li>新增元素</li>");
        });
        
        //为事件委托的增加元素
        $("#right .btnNew").click(function(){
            $("#rightCon ul").append("<li>新增元素</li>");
        });

});

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>事件委托和事件绑定示例-新增元素测试</title>
    </head>
    <body>
        <div id="container" class="clearfix">
            <h3>事件委托和事件绑定示例-新增元素的事件处理测试</h3>
            <div id="left">
                <h4>事件绑定的示例 <span class="btnNew">点击新增元素</span></h4>
                <div id="leftCon" class="clearfix"></div>
            </div>

            <div id="right">
                <h4>事件委托的示例 <span class="btnNew">点击新增元素</span></h4>
                <div id="rightCon" class="clearfix"></div>
            </div>
        </div>
    </body>
</html>