使用on绑定动态添加的操作列点击事件不生效

我在使用on方法绑定动态操作列时,当我绑定到动态生成元素的父节点时不生效,但绑定到动态生成元素的父节点的父节点,也就是祖先节点时可以正常生效

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <div class="ibox-content unaudit-content white-bg">
        <div class="table-responsive ">
            <table class="table table-no-bordered table-centerbody table-striped table-condensed text-nowrap" id="permissionTable"></table>
        </div>
    </div>
</body>
<script th:inline="javascript">
    (function () {
        ready(["toastr", "tableCN", "chosen", "pace", "slimscroll", "metisMenu", "treeview", "bootstrapRightFixed"], function (toastr) {
            var tableEle = $("#permissionTable");
            /**
            table中会动态从后台获取数据生成行,通过脚本动态生成操作列
            //动态添加操作列的方法
            function formatAction(value, row, index) {
                return '<div class="btn-group btn-table btn-group-sm" role="group" aria-label="">' +
                    '<a class="btn btn-white add" data-id="' + row.id + '"><i class="fa fa-pencil"></i>&nbsp;新增</a>' +
                    '<a class="btn btn-white edit" data-id="' + row.id + '"><i class="fa fa-pencil"></i>&nbsp;编辑</a>' +
                    '<button type="button" value="' + value + '" data-name="' + row.name + '" class="btn btn-white delete" role="button"><i class="fa fa-trash"></i>&nbsp;删除</button>' +
                    ' </div>'
            }
            **/
            //但是为什么绑定table节点动态操作按钮的点击事件不生效?
            /*
                //错误方法一
                $("table.table").on("click", ".edit", function () {
                    console.log("edit");
                    var id = $(this).data("id");
                    var pageUrl = BASE_PATH + "/admin/permission/edit/" + id;
                    console.log(pageUrl);
                    // GY.layer.ajaxIframe({title: "修改资源", content: pageUrl});
                });
                //错误方法二
                $("#permissionTable").on("click", ".edit", function () {
                    console.log("edit");
                    var id = $(this).data("id");
                    var pageUrl = BASE_PATH + "/admin/permission/edit/" + id;
                    console.log(pageUrl);
                    // GY.layer.ajaxIframe({title: "修改资源", content: pageUrl});
                });
            */
            //绑定到table父节点的div却可以生效?
            $("div.table-responsive").on("click", ".edit", function () {
                console.log("edit");
                var id = $(this).data("id");
                var pageUrl = BASE_PATH + "/admin/permission/edit/" + id;
                console.log(pageUrl);
                // GY.layer.ajaxIframe({title: "修改资源", content: pageUrl});
            })

        })
    })(this);
</script>
</html>

请各路前端大神解惑,谢谢

2个回答

遇到过这种情况,我是把on事件也放到数据回调里面就执行正常了

你试试这个

                $(".table").on("click", ".table .edit", function () {
                    console.log("edit");
                    var id = $(this).data("id");
                    var pageUrl = BASE_PATH + "/admin/permission/edit/" + id;
                    console.log(pageUrl);
                    // GY.layer.ajaxIframe({title: "修改资源", content: pageUrl});
                });
LuoGuoHua_Xin
会漂移的树懒 刚刚试了一下,还是不行
3 个月之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐