javascript - 未触发按钮事件(使用动态创建的类)

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

点击事件:

$(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

我的原始答案(错误!)

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

我不知道你可以在类(class)名称中使用句号，而这些年来我一直在学习，学到了一些新东西!但是，由于这个问题，我认为这是一种不好的做法。

// 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 OR .btn.rolesgrid

您需要从 _grid 中删除句号，并将其替换为空格。

正确答案

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

.btn\.rolesgrid(旧浏览器可能不支持)

或者用方括号括起来

[class~="a.b"]

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