javascript - jQuery `on` 方法未绑定(bind)事件

Question

我在绑定(bind)(或触发)click 事件时遇到问题。

var Edocs = function() {
return {
    Utils: function() {
        var initHorizontalResizer = function() {
            console.log('Edocs.Utils.initHorizontalResizer()');
            $('.resize-main-content').on('click', function() {
                console.log('abc');
                if ($('[id="menu"]').hasClass('slidedOut'))
                {
                    $('[id="menu"]').removeClass('slidedOut');
                    $('[id="content"]').removeClass('resized');
                } else {
                    $('[id="menu"]').addClass('slidedOut');
                    $('[id="content"]').addClass('resized');
                }
            });
        };
        return {
            init: function() {
                console.log('Edocs.Utils.init()');
                initHorizontalResizer();
            }()
        };
    }()
};
}();

当我打开 javascript 控制台时，我看到以下值:Edocs.Utils.init() 和 Edocs.Utils.initHorizo​​ntalResizer()，但是当我单击 .resize-main-content 元素 - 没有任何反应。所以我尝试将此绑定(bind)直接粘贴到控制台并且... - 它正在工作!为什么？

我正在使用 Primefaces 5.0 (jQuery 1.10.x)

Answer 1

假设.resize-main-content元素动态附加到页面，则需要使用on的委托(delegate)版本:

$(document).on('click', '.resize-main-content', function() {
    // rest of your code...
});

请注意，应更改 document 以选择在 DOM 加载时可用的 .resize-main-content 最近的父元素。我只是在这里使用 document 作为示例。