我在使用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> 新增</a>' +
'<a class="btn btn-white edit" data-id="' + row.id + '"><i class="fa fa-pencil"></i> 编辑</a>' +
'<button type="button" value="' + value + '" data-name="' + row.name + '" class="btn btn-white delete" role="button"><i class="fa fa-trash"></i> 删除</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>
请各路前端大神解惑，谢谢
