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"]

说实话也不是好主意，最好剥去自动生成的句号并改用空格。

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

按钮创建

onClick事件：

方法：

1 个答案: