单击特定按钮时无法触发EVT

Question

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

我要这样做，以便单击+上的一个可以做一件事，单击第二个+上的可以做另一件事，依此类推。某些父母的ID略有不同，我正在尝试使用特异性来定位特定的+。

我之所以写，是因为我无法仅将一个+作为目标（console.log无法正常工作）。

这可能很愚蠢，但我一直在对此进行修改，但没有任何运气，所以我想在这里问一下。

JS代码段：

this.solutions = response.data.body;      
this.solutions.forEach((solution,i) => { 
this.solutions[i].image = require(solution.image)        
this.solutions[i].typeImage = require(solution.typeImage)
 });

屏幕截图：

// $(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') }); 是唯一的。另外两个表使用0和1而不是2。

JS（创建+的地方）

#DataTables_Table_2_wrapper

Answer 1

您在目标.btn-new中错过了一个孩子

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

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

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>

如果您将无法使其适应当前的代码，我将为您提供帮助。