为什么我可以将JS / Jquery函数应用于按钮特定的ID，但不能链接到他的类？

Question

我试图在按下按钮时应用一个函数，但有时会附加该按钮，因此我尝试将该函数应用于他的班级。问题是，只有将函数链接到按钮ID时，我才能使该函数起作用，而链接类时，什么也没发生。这会发生在附加按钮和普通按钮上。

$(document).on('click', '.createCustomLayer', function () {
 alert("Alert");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="btn btn-light form-control" id="createCustomLayer" class="createCustomLayer" style="margin-top: 32px;">Create a custom layer</button>

如果我将.createCustomLayer的{​​{1}}更改为正常，则一切正常。

Answer 1

您不能多次class=""将createCustomLayer移到class="btn btn-light form-control"，所以看起来像class="btn btn-light form-control createCustomLayer"

演示

$(document).on('click', '.createCustomLayer', function () {
 alert("Alert");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="btn btn-light form-control createCustomLayer" id="createCustomLayer" style="margin-top: 32px;">Create a custom layer</button>

Answer 2

这是因为元素中有多个 class 属性。如果您在同一个元素中具有多个 class 属性，则除了第一个元素外，其他所有元素都将被忽略：

$(document).on('click', '.createCustomLayer', function () {
 alert("Alert");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="btn btn-light form-control createCustomLayer" id="createCustomLayer" style="margin-top: 32px;">Create a custom layer</button>