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

siriuschopin 2018-02-26 09:28:18 


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

    });

}
...全文
588 9 打赏 收藏 转发到动态 举报
写回复
用AI写文章
9 条回复
切换为时间正序
请发表友善的回复…
发表回复
joinzhu 2018-03-05
  • 打赏
  • 举报
 回复
是不是只要给#canvas设置 pointer-event:none; 就行了？
#麻辣小龙虾# 2018-02-27
  • 打赏
  • 举报
 回复
代码看起来没有什么问题，是不是你的jquery版本不支持On方法。
Go 旅城通票 2018-02-27
  • 打赏
  • 举报
 回复
代码没有问题，自己检查下jquery版本，on是后续版本才加的。

Web开发学习资料推荐
jquery全年日期选择器日历插件
asp json类库解析json字符串
天际的海浪 2018-02-27
  • 打赏
  • 举报
 回复
#canvas { position: absolute; left: 0; top: 0; width: 10000px; height: 10000px; /*background: #8a6d3b;*/ } 这个#canvas覆盖了整个页面，当然什么都点不了了
qq_35269473 2018-02-27
  • 打赏
  • 举报
 回复
看完了你的js,觉得没问题，就拿了你的代码到浏览器上跑了，我发现你不是js的问题，而是canvas标签把你要点击的元素都覆盖了，醉了
siriuschopin 2018-02-27
  • 打赏
  • 举报
 回复 
<!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，可不可以麻烦大神跑一下试试
siriuschopin 2018-02-27
  • 打赏
  • 举报
 回复
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" src="js/blueprint.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是好用的。 为什么放在项目里就不行了啊，是因为被覆盖了？点不到？或是定位的问题？
wcwtitxu 2018-02-26
  • 打赏
  • 举报
 回复 
$(document).delegate('.unit_container', 'click', function () {
	alert("what");
});
天际的海浪 2018-02-26
  • 打赏
  • 举报
 回复
测试你的方法没问题啊
jQuery小白入门课第二季
Jquery 入门 第二季 介绍.mp4 复习Jquery 入门 第1季 内容.mp4 用append prepend after  before添加 .mp4 用remove empty删除元素【注意对比英文文档】 .mp4 获取并设置 CSS 类.mp4 用css()获取和设置属性.mp4 ...
解决append中onclick无效和empty与html（“”）方法的区别
关键字查询“林”，弹出框验证获取到元素值“林” 查找完后并没有正确显示查找信息 查看tomcat的输出内容，正确 是在向前台页面显示的部分出现了问题，源代码如下： 将/ $(".panel-body table tbody")...
jQuery
jQuery jQuery是一个快速、小巧功能丰富的js库（其实就是学习jquery方法如何...找到你要错做的元素（jquery选择器），去操作他（添加属性，样式，文本。。。） jQuery入口函数和window.onload入口函数的区别 wind
尚硅谷 jQuery 笔记(张晓飞 2018)
了解jQuery 画页面 HTML CSS 交互(动态效果) JS基础(ES,语法) JS的DOM与BOM 存在的问题 DOM的语法太麻烦(尤其是插入元素) 界面的操作: CRUD(增删改查),最难的是查询(文档树纷繁复杂) jQuery是一个优秀的JS函数...
前端面试JQUERY
1 你在公司是怎么用jquery的？ 答：在项目中是怎么用的是看看你有没有项目经验(根据自己的实际情况来回答) 你用过的选择器啊，动画啊，表单啊，ajax事件等 配置Jquery环境 下载jquery类库 在jsp页面引用jquery类库...
JavaScript

87,907

社区成员

224,614

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章