jQuery`on`方法未綁定事件

Question

我有綁定（或觸發） 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.initHorizontalResizer() ，但是當我單擊.resize-main-content元素時，沒有任何反應。 因此，我嘗試將此綁定直接粘貼到控制台上，並且...-工作正常！ 為什么？

我正在使用Primefaces 5.0（jQuery 1.10.x）

Answer 1

假設.resize-main-content元素是動態附加到頁面上的，則需要使用on的委托版本：

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

請注意，應更改document以選擇.resize-main-content的最近父元素，該元素在DOM加載時可用。 我只是在這里以document為例。