在动态添加的元素上单击无法识别 class

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%； 'initial' class 从 h2 中删除，'expanded' class 添加到 h2。但是 'closeTrigger' 变量（h2.expanded）元素上的点击事件没有注册。我做错了什么？

Answer 1

我认为这是因为您将点击事件函数应用于实际不存在的元素（h2 元素还没有 .expanded class).

尝试移动这行代码..

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

Answer 2

我会稍微重写一下以使事件处理程序更简单。对所有 h2 使用一个处理程序，只检查 class。这样您就可以避免附加分离处理程序。

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

在动态添加的元素上单击无法识别 class

Click not recognized on element with dynamically added class

html

javascript

jquery

addclass

object