使用"模块模式"时jQuery单击事件不起作用

Question

我是一个中间前端JS开发者,我试图通过克里斯Coyyer列出的模块模式在这里.

但是当我在设置中存储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();
});

Answer 1

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

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

另一个是替换

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

同

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

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

以下是您的代码的轻微变化,在我看来,它更清晰,同时仍然使用模块(IIFE变体):

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

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