Firing a function with a newly added class

Question

I've tried to simplify it, simple enough to make my question clearer. The alert 'I am a boy' didn't popup with even after the addClass has been executed. Here is my code:

$(".first").click(function () {
              var a = $(this).html();
              if (a=='On') {
                   $(this).removeClass('first').unbind().addClass('second');
                  $(this).html('Off');
              }
        });

        $(".second").click(function () {
         alert('I am a boy');
      });

<button class="first">On</button>

Possible duplicate of [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Muhammad Usman, Jun 20 '18 at 21:31
are you saying newly added `class` or `element` with the specfic class, you should add the relevant `HTML` along with it. — Muhammad Omer Aslam, Jun 20 '18 at 21:34
@atomty Not as a comment, just amend your original question. At the same time tidy up your code indenting, and even better make your snippet into a working one. The more you can help SO users, the more likely you are to get a good answer. — Keith, Jun 20 '18 at 21:48

score 0 · Answer 1 · answered Jun 20 '18 at 22:10

0

The function you pass to $.post doesn’t run until later (a callback). So the class is added after you try to select it. Do it inside the callback, the same way you added the class (and you don’t need to select that class, just use $this)

answered Jun 20 '18 at 22:10

Ben West

4,398
1
16
16

I don't really understand your answer, but I've edited the question for simplicity. Can you help look into it? – atomty Jun 20 '18 at 22:19

score 0 · Accepted Answer · answered Jun 20 '18 at 22:32

This behavior is because you are apply a class to an element after the DOM has loaded, in other words dynamically. Because of this, your event listener attached to the control for '.second' isn't aware of the newly added class and doesn't fire when you click on that control.

To fix this, you simply need to apply your event listener to a parent DOM object, typically $(document) or $('body'), this will ensure it is aware of any children with dynamically added classes.

As George Bailey said, you can refer here for a in depth explanation.

In regards to your specific code, the fix is to simply adjust it as so:

$(".first").click(function () {
  var a = $(this).html();
  if (a=='On') {
    $(this).removeClass('first').unbind().addClass('second');
    $(this).html('Off');
  }
});
    
/* Changed this:
$(".second").click(function () {
         alert('I am a boy');
      });
*/

// To this:
$(document).on('click', '.second', function () {
  console.log('I am a boy');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="first">On</button>

oh...now, I understand better, I will go through the link to learn more, thank you very much for your contribution, it was a hit. — atomty, Jun 20 '18 at 22:57

Firing a function with a newly added class

2 Answers2