javascript - 单击特定按钮时无法触发事件

Question

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

我想要做到这一点，以便单击其中一个 + 执行一件事，单击第二个 + 执行另一件事，依此类推。 parent 的某些 ID 略有不同，我正在尝试使用特异性来定位特定的+。

我写这封信是因为我无法仅定位一个 +(console.log 不起作用)。

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

JS 片段:

// $(document).on("click", ".btn-new", disp._newRole); // ----- this works, but it triggers every +

$(document).on("click", "#DataTables_Table_2_wrapper > .btn-group > .btn-default > .btn-new", disp._newRole);

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

屏幕截图:

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

JS(创建+的地方)

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
                  }
                },

Answer 1

您错过了目标 .btn-new 中的一个子项

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

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