Почему JQ игнорирует отсутствие класса?

Question

Вот такой маленький пример:

  $(".clickbl").click(function(){
    $(this).css({"background": "yellow"})
  });
  $("#btn").click(function(){
    $("#s1").removeClass("clickbl");
  });

.square {width: 50px;height: 50px; background: blue; font-size: 3em; padding: 10px;}
.clickbl {cursor: pointer;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="s1" class="clickbl square">1</div><br>
<div id="s2" class="clickbl square">2</div><br>
<div id="s3" class="clickbl square">3</div><br>
<button id="btn">fixate s1 color</button>

Событие click по элементу происходит по имени класса, но этот класс убран! А событие все равно происходит. Я догадываюсь, что дело в непростых взаимоотношениях JS c DOM, но что можно сделать, что бы не фигачить кучу if?

Answer 1

$(document).on('click', ".clickbl", function(){
  $(this).css({"background": "yellow"})
});

БЛОГ НА HUSL

Почему JQ игнорирует отсутствие класса?

Ответы (1 шт):