未触发按钮事件（使用动态创建的类工作）

Question

我在三个单独的表（使用 DataTables 构建）旁边有三个加号 (+) 按钮。由于加号是在一个位置（使用 DT）创建的，因此它们被分配了相同的类，单击它们中的任何一个都会打开相同的模式。

我为每个优点动态添加了类以增加特异性。我正在尝试为第一个 + 触发 onClick 事件，但由于某种原因它不起作用。

这是我的问题：为什么我的 onClick 事件没有被触发？我必须添加更多特异性吗？按钮的创建位置有问题吗？ （见下面的代码）

按钮创建

loadDataTable(_payload, _grid, _def) {
...
var table = $(_grid).DataTable({
            data: _payload,
...
buttons: [
            {
              text:      '<i class="fa fa-plus"></i>',
              titleAttr: 'Add',
              className: 'dtAddClass btn' + _grid                
            },

// this creates:
// btn 1: class="btn btn-default dtAddClass btn.rolesgrid"
// btn 2: class="btn btn-default dtAddClass btn.srchgrid"
// btn 3: class="btn btn-default dtAddClass btn.additionalsrchgrid"
// this is exactly what I want

onClick 事件：

$(document).on("click", ".btn.rolesgrid", disp._newRole); // this does not open the modal

$(document).on("click", ".dtAddClass, .btn.rolesgrid", disp._newRole); // this triggers all of the pluses to open modals, which I don't want. I'm guessing it has to do with the .dtAddClass

方法：

_newRole(e) {
        dialog.dialog({ title: "Add New Search/Role Filled" });
        dialog.dialog("open");

        console.log('this is e: ' + e)
    }

Answer 1

我的原始答案（错误！）

留下旧答案，以防有人和我有同样的想法，以节省他们的时间

我不知道你可以在班级名称中加上句号，而我这几年一直在学习新的东西！但是，由于这个问题，我认为这是一种不好的做法。

// this creates:
// btn 1: class="btn btn-default dtAddClass btn.rolesgrid"
// btn 2: class="...dtAddClass btn.srchgrid"
// btn 3: class="...dtAddClass btn.additionalsrchgrid"
// this is exactly what I want

其实不是。

btn.rolesgrid 是无效类，类名中不能有句号。

第二个打开它们的原因是因为你使用了一个逗号，你基本上要求'如果我点击dtAddClass或.btn.rolesgrid

您需要去掉 _grid 的句号并用空格代替。

正确答案

因为你有一个句号，所以你需要逃避它

.btn\.rolesgrid（老浏览器可能不支持）

或者用方括号括起来

[class~="a.b"]

说实话，这都不是好主意，最好去掉自动生成的句号并使用空格。