Jquery changing class and trigger

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>

When I click on span it removes the class fake_h and add active_h. But after that when I click span(class='active_h') It doesn't work. Don't trigger alert or anything. Can anyone explain why it doesn't work.

`$(body).on("click", '.active_h', function(){ alert(123) })` — dandavis, Sep 18 '19 at 05:27
Possible duplicate of [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Carl Binalla, Sep 18 '19 at 05:28

score 3 · Answer 1 · answered Sep 18 '19 at 05:30

You can do it like this.

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

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

score 3 · Accepted Answer · answered Sep 18 '19 at 05:32

Wrap your span with some div and use that div class to trigger your dynamic added class. Changing the identifiers dynamically need to use delegated event handlers.

$('.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 changing class and trigger

2 Answers2