The second .click() function is not working

Question

The first .click function is used to add an element(div) in a container and the second one is used to remove it from the container. The container initially has no elements. The removing of the function by clicking on it is not working

$(document).ready(function(){
    $(".class1").click(function(){
       //Code for adding element to the container and 
       // removing class1 from it and adding class2

    });

    $(".class2").click(function(){
       alert("hi");   //Even the alert is not displayed
       $(this).fadeOut(100);    
    });
});

However, it works if the element is already there before the page loads in the container. Any reasons why? Is it because of document.ready function? Solutions?

Answer 1

That's because when you're adding the click handler for .class2 elements, you're only adding the event to elements which have that class at that specific moment in time; e.g none.

Instead, you need to use event delegation like so;

$(document).on('click', '.class2', function () {
    alert('hi');
    $(this).fadeOut(100);
});

This will work as it binds an event to document (which always exists), which listens for clicks on any .class2 elements using event delegation. For more info, read the on() documentation.

Answer 2

use delegate event handler for both classes(if you toggle between both of them, or if you not back to class1 then second one is enough ) because after changing class elements are treated as dynamic.

$("#container").on("click", ".class1", function(){

});

$("#container").on("click", ".class2", function(){

});

Here #container refers to the parent of those class, you may have something else.

Answer 3

As you try to add the code to click .class2 it isn't yet created as i understand. try adding the click event, after you created the .class2 element like this:

$(document).ready(function(){
    $(".class1").click(function(){
            //Code for adding element to the container and removing class1 from it and adding class2

        $(".class2").click(function(){
            alert("hi");         //Even the alert is not displayed
            $(this).fadeOut(100);

        });
    });
});