javascript – 使用“模块模式”时jQuery单击事件不起作用

我是一名中级前端JS开发人员,我正在尝试Chris Coyyer here概述的模块模式.

但是当我在设置中存储jQuery选择器时,我无法使用它来触发click事件.请参阅以下代码和我的评论…非常感谢任何帮助！

var s,TestWidget = {
  settings: {
    testButton: $("#testing")
  },init: function() {
    s = this.settings;
    this.bindUIActions();
  },bindUIActions: function() {
    console.log(s.testButton); // This works: [context: document,selector: "#testing",constructor: function,init: function,selector: ""…]

    //This doesn't work - why?????
    s.testButton.click(function() {
        //Why isn't this triggered?
        alert('testButton clicked');
    });

    /*This works,obvIoUsly:
    $('#testing').click(function() {
        alert('testButton clicked');
    });
    */

  }
};
$(document).ready(function() {
    TestWidget.init();
});

解决方法

问题是你在DOM准备好之前初始化$(“#testing”),所以这个jQuery对象是空的.

一个简单的解决方案是将所有代码放入就绪回调中.

另一个是替换

settings: {
    testButton: $("#testing")
  },

同

settings: {
  },init: function() {
    s = this.settings;
    s.testButton = $("#testing");
    this.bindUIActions();
  },

但是很难理解你为什么这么简单的事情使用这么多代码.你可能在这里过度使用这个模式并且它不是很干净,因为你有两个全局变量s和TestWidget,当一个已经很多时.

这里有一些代码的细微变化,在我看来,更清洁,同时仍然使用模块(IIFE variant)：

TestWidget = (function(){
    var settings = {};
    return {
        init: function() {
            settings.testButton = $("#testing");
            this.bindUIActions();
        },bindUIActions: function() {
            console.log(settings.testButton);
            settings.testButton.click(function() {
                alert('testButton clicked');
            });
        }
    }

})();
$(document).ready(function() {
    TestWidget.init();
});

设置保存在闭包中,并且不会在全局命名空间中泄漏.请注意,如果您不对该模块执行更多操作,即使是此版本也没有意义.

javascript – 使用“模块模式”时jQuery单击事件不起作用

解决方法

猜你在找的jQuery相关文章