Блог

Я пытаюсь применить функцию при нажатии кнопки, но иногда кнопка добавляется, поэтому я попытался применить функцию к его классу. Проблема в том, что я могу заставить функцию работать, только когда я связываю ее с идентификатором кнопки, когда я связываю класс, ничего не происходит. Это происходит с добавленной кнопкой, а также с обычной кнопкой.

 $(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 на #createCustomLayer , все работает нормально.

Вы не можете выполнить несколько 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>  

Это потому, что у вас есть более одного атрибута 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>