jquery动态append的元素用on,delegate还是不能点击，感觉参数没错啊

$(document).ready(function () {
    addUnitDiv();
    addEvent();
});
function addUnitDiv() {    //添加单元容器    //列
    for (var i = 0; i < 20; i++) {
        var $unit_column = $("<div id='unit_column_" + i + "' class='unit_column'></div>");
        $("#unit_column_div").append($unit_column);
        //每列
        for (var j = 0; j < 40; j++) {
            var $unit_container = $("<div id='unit_container_" + i + "_" + j + "' class='unit_container'></div>");
            $("#unit_column_" + i).append($unit_container);
            // $unit_container.css("background","rgb("+i*5+","+j*4+","+(i+j));
        }
    }
    $(".unit_column:even").css("background", "white");
    $(".unit_column:odd").css("background", "rgba(216,191,216,0.5)");
    //事件委托
    $(document).on('click', '.unit_container', function () {
        alert("what");
    });
}

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

$(document).delegate('.unit_container', 'click', function () {
alert("what");
});
代码没有问题，自己检查下jquery版本，on是后续版本才加的。Web开发学习资料推荐
jquery全年日期选择器日历插件
 asp json类库解析json字符串
代码看起来没有什么问题，是不是你的jquery版本不支持On方法。
jqeury版本没什么问题，经测试<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/blueprint.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-theme.min.css">
</head>
<body>
<div id="unit_column_div"></div>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/npm.js"></script>

<script type="text/javascript">
    for (var i = 0; i < 20; i++) {
        var $unit_column = $("<div id='unit_column_" + i + "' class='unit_column'></div>");
        $("#unit_column_div").append($unit_column);
        //每列
        for (var j = 0; j < 40; j++) {
            var $unit_container = $("<div id='unit_container_" + i + "_" + j + "' class='unit_container'></div>");
            $("#unit_column_" + i).append($unit_container);
            // $unit_container.css("background","rgb("+i*5+","+j*4+","+(i+j));
        }
    }
    $(".unit_column:even").css("background", "white");
    $(".unit_column:odd").css("background", "rgba(216,191,216,0.5)");
    //事件委托
    $(document).on('click', '.unit_container', function () {
        $(this).css("background","blue");
    });
</script>
</body>
</html>
这样单独拎出来on是好用的。
为什么放在项目里就不行了啊，是因为被覆盖了？点不到？或是定位的问题？
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BLUEPRINT</title>
    <link rel="stylesheet" href="css/blueprint.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-theme.min.css"></head>
<body>

<div id="header" class="head">
    <div id="logo" class="head">
        <p>BULEPRINT</p>
    </div>
    <div id="manipulate" class="head">    </div>
</div>
<div id="content">
    
    <div id="tools">
        <ul id="toollist">
            <li class="filetool">NEW</li>
            <li class="filetool">OPEN</li>
            <li id="strlistli">
                <div id="strlistdiv">
                    <div id="add" class="strdiv">
                        <div id="addsymbol" class="symbol">                        </div>
                        <label id="addsymbollabel">添加结构</label>
                    </div>
                    <div id="jiandanstr" class="strdiv">
                        <div id="jiandansymbol" class="symbol">                        </div>
                        <label id="jiandansymbollabel">简单结构</label>
                    </div>
                    <div id="zhinengstr" class="strdiv">
                        <div id="zhinengsymbol" class="symbol">                        </div>
                        <label id="zhinengsymbollabel">职能结构</label>
                    </div>
                    <div id="shiyebustr" class="strdiv">
                        <div id="shiyebusymbol" class="symbol">                        </div>
                        <label id="shiyebusymbollabel">事业部结构</label>
                    </div>
                    <div id="juzhenstr" class="strdiv">
                        <div id="juzhensymbol" class="symbol">                        </div>
                        <label id="juzhensymbollabel">矩阵结构</label>
                    </div>
                    <div id="tuanduistr" class="strdiv">
                        <div id="tuanduisymbol" class="symbol">                        </div>
                        <label id="tuanduisymbollabel">团队结构</label>
                    </div>
                </div>
            </li>
            <li id="unitlistli">
                <div id="unitlistdiv">
                    <div id="jingli" class="unitdiv">
                        <div id="jinglisymbol" class="symbol">                        </div>
                        <label id="jinglisymbollabel">经理</label>
                    </div>
                    <div id="sbu" class="unitdiv">
                        <div id="sbusymbol" class="symbol">                        </div>
                        <label id="sbusymbollabel">SBU</label>
                    </div>
                    <div id="zhinengbumen" class="unitdiv">
                        <div id="zhinengbumensymbol" class="symbol">                        </div>
                        <label id="zhinengbumensymbollabel">职能部门</label>
                    </div>
                    <div id="xiangmubumen" class="unitdiv">
                        <div id="xiangmubumensymbol" class="symbol">                        </div>
                        <label id="xiangmubumensymbollabel">项目部门</label>
                    </div>
                    <div id="guanxi" class="unitdiv">
                        <div id="guanxisymbol" class="symbol">                        </div>
                        <label id="guanxisymbollabel">关系</label>
                    </div>
                </div>
            </li>
        </ul>
    </div>
    
    <div id="show">
        <div id="unit_column_div"></div>
        <canvas id="canvas"></canvas>
    </div>
</div>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/npm.js"></script>
<script type="text/javascript" src="js/blueprint.js"></script>
<script type="text/javascript"></script>
</body>
</html>$(document).ready(function () {
    addUnitDiv();
    addEvent();
});
function addUnitDiv() {    //添加单元容器    //列
    for (var i = 0; i < 20; i++) {
        var $unit_column = $("<div id='unit_column_" + i + "' class='unit_column'></div>");
        $("#unit_column_div").append($unit_column);
        //每列
        for (var j = 0; j < 40; j++) {
            var $unit_container = $("<div id='unit_container_" + i + "_" + j + "' class='unit_container'></div>");
            $("#unit_column_" + i).append($unit_container);
            // $unit_container.css("background","rgb("+i*5+","+j*4+","+(i+j));
        }
    }
    $(".unit_column:even").css("background", "white");
    $(".unit_column:odd").css("background", "rgba(216,191,216,0.5)");
    //事件委托
    $(document).on('click', '.unit_container', function () {
        $(this).css("background","blue");
    });
}
function Unit(type, name, id, itsClass) {   //单元对象构造函数
    this.type = type;
    this.name = name;
    this.id = id;
    this.class = itsClass;
}
function chooseUnitType(type, name, id, itsClass) {     //选择单元类型
    //todo:计算当前各类型unit数量确定新unit 的id
    var unit = new Unit(type, name, id, itsClass);
    var thisTypeUnitNum = document.getElementsByClassName("unit " + itsClass).length;        //当前类型单元的个数
    id = type + "_" + thisTypeUnitNum;
    var $unit = $("<div id='" + id + "' class='unit " + itsClass + "'>" + name + "</div>");
    //TODO：给unit_container加点击事件，再调用addUnit()，传入type,要检验unit_container是否已有子元素，有则不能添加
    $(document).on('click', "#manipulate", function () {
        addUnit($("#unit_container_0_0"), $unit);
    });}
function addUnit(unit_container, unit) {    //添加单元
    //todo:if unit_container有子元素则不能添加
    if (unit_container.children().length == 0) {
        unit_container.append(unit);
    }}function addEvent() {
    //添加结构事件
    $(".strdiv:not(:first)").click(function (e) {
        // e.stopPropagation();
        var tar = e.target;
        if (tar.parentNode.id == "jiandanstr" || tar.id == this.id) {
            // alert(tar.id + "  " + this.id);
        } else if (tar.parentNode.id == "zhinengstr" || tar.id == this.id) {
            // alert(tar.id + "  " + this.id);
        } else if (tar.parentNode.id == "shiyebustr" || tar.id == this.id) {
            // alert(tar.id + "  " + this.id);
        } else if (tar.parentNode.id == "juzhenstr" || tar.id == this.id) {
            // alert(tar.id + "  " + this.id);
        } else {
            // alert(tar.id + "  " + this.id);
        }
    });
//添加单元事件
    $(".unitdiv").click(function (e) {
        // e.stopPropagation();
        var tar = e.target;
        if (tar.parentNode.id == "jingli" || tar.id == this.id) {
            chooseUnitType("jingli", "经理", "", "jingli");
        } else if (tar.parentNode.id == "sbu" || tar.id == this.id) {
            chooseUnitType("sbu", "SBU", "", "sbu");
        } else if (tar.parentNode.id == "zhinengbumen" || tar.id == this.id) {
            chooseUnitType("zhinengbumen", "职能部门", "", "zhinengbumen");
        } else if (tar.parentNode.id == "xiangmubumen" || tar.id == this.id) {
            chooseUnitType("xiangmubumen", "项目部门", "", "xiangmubumen");
        } else {
            // chooseUnitType("guanxi");
        }
    });}
body {
    overflow: auto;
}.head {
    height: 50px;
    border-bottom: black solid 3px;
}#header {
    position: fixed;
    width: 100%;
    background: white;}#logo {
    display: inline-block;
    position: relative;
    width: 200px;
    background: white;
    border-right: black dashed 2px;
    /*margin-bottom: 5px;*/
    text-align: center;
    /*vertical-align: center;*/
}#logo p {
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: x-large;}#manipulate {
    display: inline-block;
    position: relative;
    float: right;
    right: 0;
    top: 0;
    background: #9acfea;
    width: 500px;
}#content {
    position: fixed;
    top: 50px;
    width: 100%;
    height: 100%;
    background: white;
}#tools {
    /*float: left;*/
    position: relative;
    left: 0;
    border-right: black dashed 2px;
    width: 200px;
    height: 100%;
    margin: 0;
}ul {
    list-style: none;
}li {}#strlistli, #unitlistli {
    border: black solid 2px;
    border-radius: 3px;
    margin: 5px;
    position: relative;
    top: 10px;
    left: -10px;
}#strlistdiv, #unitlistdiv {
    width: 100%;
    height: 180px;
    margin: 0;
    padding: 0;
    background-color: white;
}.strdiv, .unitdiv {
    width: 50%;
    height: 60px;
    border: black solid 1px;
    /*margin: 5px;*/
    /*padding: 3px;*/
    float: left;
    /*text-align: center;*/}.symbol {
    position: relative;
    /*left: 20%;*/
    width: auto;
    height: 60%;
    margin: 0;
}#addsymbol {
    background: url(../img/addsymbol.png) no-repeat center;
    background-size: contain;
}#addsymbollabel {}.filetool {
    border: black solid 2px;
    border-radius: 3px;
    margin: 5px;
    text-align: center;
    position: relative;
    top: 10px;
    left: -10px;
}#show {
    /*float: left;*/
    position: relative;
    top: -100%;
    left: 200px;
    width: 10000px;
    height: 10000px;
    /*overflow: hidden;*/
    /*background: #9d9d9d;*/
}#unit_column_div {
    position: relative;
    /*top: -20px;*/
    height: 10000px;
}.unit_column {
    /*position: absolute;*/
    /*top: 0;*/
    /*left: 0;*/
    float: left;
    /*background: #8a6d3b;*/
    height: 10000px;
    width: 160px;
}.unit_container {    height: 50px;
    width: 100%;
    border-bottom: black dashed 1px;
    border-right: black dashed 1px;
    display: block;
    /*z-index: 1;*/
}/*TODO:给每种unit节点添加不同样式*/#canvas {
    position: absolute;
    left: 0;
    top: 0;
    width: 10000px;
    height: 10000px;
    /*background: #8a6d3b;*/
}这是所有的代码（不包括bootstrap）,jquery是3.3.1，可不可以麻烦大神跑一下试试
看完了你的js,觉得没问题，就拿了你的代码到浏览器上跑了，我发现你不是js的问题，而是canvas标签把你要点击的元素都覆盖了，醉了
#canvas {
    position: absolute;
    left: 0;
    top: 0;
    width: 10000px;
    height: 10000px;
    /*background: #8a6d3b;*/
}这个#canvas覆盖了整个页面，当然什么都点不了了
是不是只要给#canvas设置 pointer-event:none; 就行了？