jQuery类定义中无法初始化事件监听器？求解决方案

首先明确：不是类定义里不能初始化事件监听器，是你的代码执行时机和写法有问题。

先看你写的这段代码：

var MyClass;
(function($) {
MyClass = new function() {
$('a').off('click');
$('a').on( 'click', function(event) {
event.preventDefault();
});
};
})(jQuery);

问题出在哪？ #

核心原因是代码执行时DOM还没加载完：当你的自执行函数运行时，页面里的<a>元素可能还没被浏览器渲染出来，这时候$('a')找不到任何元素，自然没法给它们绑定事件。

而你在控制台手动执行那段代码能生效，是因为这时候页面已经完全加载完毕，所有<a>都存在了，选择器能精准找到目标元素。

另外，new function()这种写法虽然会立即执行匿名函数并返回实例，但这种单例写法不够灵活，也不利于后续扩展，不是JS类定义的常规写法。

正确的解决方法 #

1. 等待DOM就绪后再绑定事件

把事件绑定逻辑放在DOM就绪回调里，确保执行时所有元素都已存在：

var MyClass;
(function($) {
    // 用构造函数定义类
    MyClass = function() {
        // 把初始化逻辑放到init方法里
        this.init = function() {
            // 链式写法更简洁：先移除旧事件再绑定新事件
            $('a').off('click').on('click', function(event) {
                event.preventDefault();
            });
        };
    };

    // 页面DOM加载完成后初始化实例并执行绑定
    $(document).ready(function() {
        const myClassInstance = new MyClass();
        myClassInstance.init();
    });
})(jQuery);

2. 用事件委托处理动态元素（更推荐）

如果你的页面里有动态生成的<a>元素（比如通过AJAX加载、后续JS添加），直接绑定到元素上的事件会失效。这时候用事件委托绑定到父容器（或document）更可靠：

var MyClass;
(function($) {
    MyClass = function() {
        this.init = function() {
            // 绑定到document，监听所有a元素的点击事件
            $(document).off('click', 'a').on('click', 'a', function(event) {
                event.preventDefault();
            });
        };
    };

    $(document).ready(function() {
        new MyClass().init();
    });
})(jQuery);

事件委托的原理是利用事件冒泡，父元素能监听到子元素的点击，哪怕子元素是后续动态添加的也能生效。

额外小建议 #

• 尽量避免直接绑定到document，如果页面有固定的容器（比如所有链接都在#content里），绑定到这个容器会更高效。
• 移除事件时最好指定具体的处理函数，避免误删其他地方绑定的同类型事件（不过你这里用off('click')是清空所有点击事件，如果你确定不需要其他事件的话也没问题）。

内容的提问来源于stack exchange，提问作者heroxav