Why jquery may not trigger a click for a class added with AddClass or ToggleClass?

Question

This code below is very simple but for some reason it dosent work.

I want a simple function to toggle elements that will active different functions each one. When you click on the first element it changes his class for the second element, when you click on a second element it does other things.

The toggle works well (No JS errors) but I dont know why jQuery do not trigger a click on a class that was added with javascript. I tested too with "addClass" and "removeClass" and got the same result.

I already created a replacement for this (using a if with jquery function "hasclass" to switch behavior when you click on the element). I also understand that I may use other functions with count and all... That would not work for what I wanted but this is not the point...

I just wanted to know why it dosent work because its a common solution that I am sure that I will use again. The code is so simple that I am wondering if I dindt miss something obvious.

Here is fiddle: https://jsfiddle.net/mhbubh8p/17/

HTML:

  <div class="toggle aaa">No click so far</div>

Jquery

$(document).ready(function () {

      $('.aaa').click(function() {
        $('.toggle').toggleClass('aaa zzz');
        $('.toggle').html('Class was toggled');
     });





     $('.zzz').click(function() {
             alert("This should work...it dosent... why?");

     });
});

`$('.zzz').click()` only works for Elements that are defined when it is called. You should store those Anonymous functions as named functions and use them when you need to dynamically. — StackSlave, Feb 15 '18 at 00:53

ryanpcmcquen · Answer 1 · 2018-02-15T00:57:42.290

It's just a case of event delegation:

$(document).ready(function() {

  $('.aaa').click(function() {
    $('.toggle').toggleClass('aaa zzz');
    $('.toggle').html('Class was toggled');
  });

  $(document).click('.zzz', function() {
    alert("This should work");
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="toggle aaa">
  No click so far
</div>

Since your element with the zzz class does not exist when you bind the click event to it, the listener never gets created. One fix is to bind to the document and check for your element inside of the listener.

Another fix would be to create the listener when the zzz element is created, like so:

$(document).ready(function() {

  $('.aaa').click(function() {
    $('.toggle').toggleClass('aaa zzz');

    $('.zzz').off().click(function() {
      alert("This should work");
    });

    $('.toggle').html('Class was toggled');
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="toggle aaa">
  No click so far
</div>

One advantage to this approach is that the click listener will show up in your dev tools when inspecting the element (without having to have Ancestors checked). I find this makes debugging a bit easier, but it also requires you to remove all previous listeners with .off(), otherwise you can get duplicate bindings, which no one wants.

Why jquery may not trigger a click for a class added with AddClass or ToggleClass?

1 Answers1