toolbar - 查询单击时的 Dojo 在切换按钮的工具栏中不起作用

Question

按照这里的示例，我尝试做同样的事情，但查询对我不起作用。

http://jsfiddle.net/qDbd5/

require(["dojo/parser", "dijit/Toolbar", "dijit/form/ToggleButton", "dojo/query", "dojo/dom-class", "dojo/on", "dojo/domReady!"], function (parser, ToolBar, ToggleButton, query, domClass, on) {
on(query(".dijitToggleButton"), "click", function (e) {
    query(".dijitToggleButton").forEach(function (node) {
        console.log('Captured clicked event');
        domClass.remove(node, "dijitToggleButtonChecked dijitToggleButtonRtlChecked dijitRtlChecked dijitChecked");
    });
    domClass.add(this, "dijitToggleButtonChecked dijitToggleButtonRtlChecked dijitRtlChecked dijitChecked");
});

});

我试图一次只切换 1 个按钮。为什么没有触发点击事件？

Answer 1

将所有内容包装在 ready() 回调中可以解决问题。

见http://jsfiddle.net/cFQGq/

require(["dojo/ready", "dojo/parser", "dijit/Toolbar", "dijit/form/ToggleButton", "dojo/query", "dojo/dom-class", "dojo/on", "dojo/domReady!"], function (ready, parser, ToolBar, ToggleButton, query, domClass, on) {
    ready(function() {
        on(query(".dijitToggleButton"), "click", function (e) {
            query(".dijitToggleButton").forEach(function (node) {
                console.log('Captured clicked event');
                domClass.remove(node, "dijitToggleButtonChecked dijitToggleButtonRtlChecked dijitRtlChecked dijitChecked");
            });
            domClass.add(this, "dijitToggleButtonChecked dijitToggleButtonRtlChecked dijitRtlChecked dijitChecked");
        });
    }); 
});

如果您查看domReady ! 的解释，它会提到它不足以使用 dojo 小部件，因为它在 DOM 加载之后执行，而不是在小部件完成初始化之后执行。dojo/ready 在小部件完成加载后执行回调。