Question

我是一名中级前端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();
});

Answer 1

问题是你在DOM准备好之前初始化$("#testing")，所以这个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 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();
});

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

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

1 个答案: