Javascript 单击特定按钮时无法触发evt

我在三个单独的表（使用DataTables构建）旁边有三个加号（+）按钮。由于+s是在一个位置创建的（使用DT），因此单击其中任何一个打开相同的模式。在大多数情况下，它们具有相同的DOM结构和类

我想这样做，点击其中一个+s做一件事，点击第二个+做另一件事，等等。在父母的一些ID中有细微的差异，我试图使用特异性来针对特定的+s

我之所以写这篇文章，是因为我无法只针对一个+（console.log不工作）

这可能是一件相当愚蠢的事情，但我一直在修补它，没有任何运气，所以我想在这里问一下

JS代码段： 屏幕盖：

#DataTables_Table_2_包装器

是唯一的。另外两个表使用0和1而不是2

JS（创建+的位置）

按钮：[
{
文本：“”，
标题：“添加”，
出口选择：{
列：_colExport
}
},

您在目标

中错过了一个孩子。btn new

$(document).on("click", "#DataTables_Table_2_wrapper > .btn-group > .btn-default > span > .btn-new > .fa-plus", function() {
console.log('hello')});

---

我建议您声明一个自定义类并避免嵌套太多的目标，因为它很容易产生错误并降低代码可读性。

我建议您通过使用选择器或不使用选择器来简化选择器，前提是您确定包装器仅包含1个符合条件的元素。这里我准备了一个示例

$（document）.on（'click'，'a1.您的类：类型的第一个'，function（）{
console.log（$（this.text（））；
})；

1.
2.

请为HTML代码提供代码片段将HTML作为代码而不是作为image@Rishab刚刚添加了它否，您必须添加呈现的html，这是在imageHey@andrea facchini上提供的，谢谢您提供的信息。但不幸的是，事件没有触发。

$（文档）。在（“单击”、“.btn新建”，disp.\u newRole）

这仍然有效（刚刚测试过），所以我不确定其他两行为什么不起作用。@Bodrov我编辑了我的答案，我遗漏了一个跨度element@andrea-facchnini做到了，谢谢！我肯定会合并一个自定义类，使内容更易于阅读（和使用）。

buttons: [
                {
                  text:      '<div class="btn btn-new" style="bottom:0.75rem; padding-right:2rem; position:relative;" title="Click to add new search"><i class="fa fa-plus"></i></div>',
                  titleAttr: 'Add',
                  exportOptions: {
                      columns: _colExport
                  }
                },

$(document).on("click", "#DataTables_Table_2_wrapper > .btn-group > .btn-default > span > .btn-new > .fa-plus", function() {
console.log('hello')});