CODEWITHSUNDEEP
javascriptjqueryhtmlobjectaddclass
JordanBarber
JordanBarber

Reputation: 2101

Click not recognized on element with dynamically added class

I have the following javascript object:

TeamExpand = {
    trigger: '.team-info h2.initial',
    container: '.team-info',
    closeTrigger: '.team-info h2.expanded',
    init: function() {
       jQuery(this.trigger).click(this.expandInfo.bind(this));
       jQuery(this.closeTrigger).click(this.closeInfo.bind(this));
    },
    expandInfo: function(e) {
        jQuery(e.currentTarget).closest('.team-info').css("height", "100%");
        jQuery(e.currentTarget).removeClass("initial");
        jQuery(e.currentTarget).addClass("expanded");
        jQuery(this.socialSVG).attr("fill", "#ffc40c");
    },
    closeInfo: function(e) {
        jQuery(e.currentTarget).closest('.team-info').css("height", "64px");
        jQuery(e.currentTarget).removeClass("expanded");
        jQuery(e.currentTarget).addClass("initial");
        jQuery(this.socialSVG).attr("fill", "white");
    }
}

My html is as follow: 

<div class="team-info">
    <h2 class="initial">Header</h2>
    <h3>Job Title</h3>
    <p>Bio</p>
</div><!--end team-info-->

The 'expandInfo' function is running just fine and changed the 'container' height to 100%; The 'initial' class is removed from the h2 and the 'expanded' class is added to the h2. But the click event on the 'closeTrigger' variable (the h2.expanded) element is not registering. What am I doing wrong?

Upvotes: 1

Views: 77

Answers (2)

Jack
Jack

Reputation: 8941

I'd rewrite this a bit to make the event handlers simpler. Use one handler for all the h2 and just check the class. This way you avoid attaching detaching handlers.

TeamExpand = {
    trigger: '.team-info h2',
    container: '.team-info',
    init: function() {
       jQuery(this.trigger).click(this.doTriger.bind(this));
    },
    doTriger: function(e) {
        var element = jQuery(e.currentTarget);
        if (element.hasClass('initial')) {
            this.expandInfo(element);
        } else {
            this.closeInfo(element);
        }
    },
    expandInfo: function(element) {
        element.closest('.team-info').css("height", "100%");
        element.removeClass("initial");
        element.addClass("expanded");
        jQuery(this.socialSVG).attr("fill", "#ffc40c");
    },
    closeInfo: function(element) {
        element.closest('.team-info').css("height", "64px");
        element.removeClass("expanded");
        element.addClass("initial");
        jQuery(this.socialSVG).attr("fill", "white");
    }
}

Upvotes: 2

jarebones
jarebones

Reputation: 71

I think it's because you're applying the click event function to an element that doesn't actually exist (the h2 element doesn't yet have the .expanded class).

Try moving this line of code..

jQuery(this.closeTrigger).click(this.closeInfo.bind(this));

..to the end of your expandInfo function, and add this..

jQuery(this.closeTrigger).unbind('click');

..to your closeInfo function before this line..

jQuery(e.currentTarget).removeClass("expanded");

Hope this helps!

Full code..

TeamExpand = {
    trigger: '.team-info h2.initial',
    container: '.team-info',
    closeTrigger: '.team-info h2.expanded',
    init: function() {
       jQuery(this.trigger).click(this.expandInfo.bind(this));
    },
    expandInfo: function(e) {
        jQuery(e.currentTarget).closest('.team-info').css("height", "100%");
        jQuery(e.currentTarget).removeClass("initial");
        jQuery(this.trigger).unbind('click');
        jQuery(e.currentTarget).addClass("expanded");
        jQuery(this.socialSVG).attr("fill", "#ffc40c");
        jQuery(this.closeTrigger).click(this.closeInfo.bind(this));
    },
    closeInfo: function(e) {
        jQuery(e.currentTarget).closest('.team-info').css("height", "64px");
        jQuery(this.closeTrigger).unbind('click');
        jQuery(e.currentTarget).removeClass("expanded");
        jQuery(e.currentTarget).addClass("initial");
        jQuery(this.socialSVG).attr("fill", "white");
        this.init();
    }
}

Upvotes: 1

Related Questions