我是一名中级前端 JS 开发人员,我正在尝试 Chris Coyyer 概述的模块模式 here .
但是当我在设置中存储一个 jQuery 选择器时,我无法使用它来触发点击事件。请参阅下面的代码和我的评论...非常感谢任何帮助!
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")
},
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
保存在闭包中,不会泄漏到全局命名空间中。请注意,如果您不对该模块做更多操作,即使是这个版本也没有意义。
关于javascript - 使用 "Module Pattern"时 jQuery 单击事件不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17750128/