使用动态添加的类在元素上单击无法识别

Question

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?

Answer 1

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");
    }
}

Answer 2

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();
    }
}