javascript - 如何根据div当前具有的类更新click函数？

我希望在单击div时发生不同的事情，具体取决于当前所在的类。我正在使用jQuery更改div的类。但是，第一次点击。 Here是一个简单的示例。

当div的类更改时，单击它现在应使其变为蓝色，但根据原始类功能，它仍变为红色。

$('.class-1').on('click', function() {
  $(this).css('background-color', 'red');
});

$('.class-2').on('click', function() {
  $(this).css('background-color', 'blue');
});

$('.change-class').on('click', function() {
  $('.class-1').prop('class', 'class-2');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="class-1">button</button>
<button class="change-class">change button class</button>

类更改时是否可以动态切换功能？

最佳答案

您可以通过click()使用事件委托将class-2事件应用于类on()的元素：

$('.class-1').on('click', function() {
  $(this).css('background-color', 'red');
});

$(document).on('click', '.class-2', function() {
  $(this).css('background-color', 'blue');
});

$('.change-class').on('click', function() {
  $('.class-1').prop('class', 'class-2');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="class-1">button</button>
<button class="change-class">change button class</button>

关于javascript - 如何根据div当前具有的类更新click函数？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/61989804/