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

Question

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

我想点击其中一个 + 做一件事，点击第二个 + 做另一件事，等等。parents 的一些 ID 略有不同我正在尝试使用特异性来定位特定的 +s。

我写信是因为我无法只针对一个 +（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

中错过了一个 child

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

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

Answer 2

我建议您通过使用 :first-of-type 选择器或不使用它来简化您的选择器，如果您确定您的包装器仅包含 1 个符合您条件的元素。这里我准备了一个示例。

$(document).on('click', '#a1 .your-class:first-of-type', function(){
 console.log($(this).text());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="a1">
 <div>
  <i class='your-class'>1</i>
 </div>
</div>
<div id="a2">
<div>
  <i class='your-class'>2</i>
 </div>
</div>

如果您不能使它适应您当前的代码，我会帮助您。

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

Unable to trigger an evt when clicking on a specific button

javascript

jquery

events

datatables

target

JS 片段：

屏幕截图：

JS（创建 + 的地方）