javascript - 在具有动态添加类的元素上单击无法识别

Question

我有以下 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”函数运行良好，并将“container”高度更改为 100%； “初始”类从 h2 中删除，“扩展”类添加到 h2。但是“closeTrigger”变量(h2.expanded)元素上的点击事件没有注册。我做错了什么？

Answer 1

我会稍微重写一下以使事件处理程序更简单。对所有 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");
    }
}