Question

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
  <span class="fake_h">Too</span>
</body>

<script>
  $('.fake_h').click(function() {
    $(this).addClass('active_h').removeClass('fake_h');
  })
  $('.active_h').click(function() {
    alert()
  })
</script>

当我单击span时，它将删除类fake_h并添加active_h。但是之后，当我单击span(class='active_h')时，它将不起作用。不要触发警报或其他任何东西。谁能解释为什么它不起作用。

Answer 1

您可以这样做。

$(document).ready(function(){
    $('.fake_h').click(function(){
       $(this).addClass('active_h');
       $(this).removeClass('fake_h');
    });

    $('body').on("click", '.active_h', function(){ 
       alert('active_h'); 
    });
});

Answer 2

用一些span包装div，然后使用该div class触发动态添加的class。动态更改标识符需要使用委托的事件处理程序。

$('.yourClass').on("click", '.fake_h', function() {
  $(this).addClass('active_h').removeClass('fake_h');
})
$('.yourClass').on("click", '.active_h', function() {
  alert()
})

.active_h {
  text-decoration: underline
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class='yourClass'>
  <span class="fake_h">Too</span>
</div>

jQuery更改类和触发器

2 个答案: