JSFiddle - React, Tailwind, and code Playground

by diguage

HTML

<!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>

CSS

#container{
    border:2px solid #F00;
    width: 95%;
    margin: 5px auto;
}

#left{
    width:48%;
    padding-right:2px;
    margin-left: 2px;
    float: left;
    display:inline;
    border:1px solid #CCC;
}
#right{
    width:49%;
    float: right;
    margin-right:3px;
    display:inline;
    border:1px solid #555;
}

#container ul{
    list-style-type: none;
}
#container li{
    margin:1px 1px;
    width: 86px;
    padding: 2px 2px;
    display: inline-block;
    background-color: #8BD400;
    border: 1px solid #486B02;
}

.btnNew{
    font-size: 80%;
    background-color: #FF9;
    font-weight: normal;
    border: 1px solid #CCC;
}
        .clearfix{*zoom:1;}.clearfix:after{height:0;content:" ";clear:both;display:block;font-size:0;visibility:hidden;}

JavaScript

$(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>");
        });

});