Javascript 在具有动态添加的类的元素上单击“不可识别”

我有以下javascript对象：

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

我的html如下所示：

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

标题
职位名称
生物

---

“expandInfo”功能运行正常，将“容器”高度更改为100%；“初始”类从

h2

中删除，“扩展”类添加到

h2

中。但是“closeTrigger”变量（h2.expanded）元素上的click事件没有注册。我做错了什么？

我认为这是因为您将click事件函数应用于一个实际上不存在的元素（h2元素还没有.expanded类）

尝试移动这行代码

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

..添加到expandInfo函数的末尾，并添加此

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

..到此行之前的closeInfo函数

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

希望这有帮助

完整代码

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

---

为了使事件处理程序更简单，我将对此进行一点重写。对所有

h2

使用一个处理程序，只需检查类即可。这样可以避免附加分离处理程序

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

---

谢谢你的回复！这确实有帮助，但只起作用一次。我可以打开、展开和关闭信息，但第二次就不行了。嗯。。我不完全确定为什么会这样，但我也没有完全测试代码。我已经更新了我的答案，包含了完整的代码，所以可以尝试一下。@Jack…谢谢，效果很好（减去“container”变量和doTriger函数后遗漏的两个逗号，你能为将来的任何人添加这些逗号吗？请不要让我，因为这两个逗号“不超过6个字符”）@JordanBarber很高兴我能帮上忙。