我无法为 dijit.form.Select 触发 onChange

Question

我似乎无法正确地将 onchange 事件附加到 dijit.form.Select 小部件。但是，我是 Web 开发的新手，所以我可能会做一些完全愚蠢的事情（尽管，据我所知（我已经阅读了我能找到的所有文档）我不是）。我确保 body 类与 dojo 主题相匹配，我使用 dojo.require() 来处理我使用的所有小部件（和 dojo.parser），而且仍然是 nada。我使用的代码是：

dojo.addOnLoad(function () {
    var _query = dojo.query('.toggle');
    for (var i in  _query) {
        dojo.connect(_query[i], 'onchange', function (ev) {
            console.log(ev + ' fired onchange');
        });
    }
});

任何帮助都将不胜感激。

补充：在深入了解 dijit 如何呈现小部件的内部结构后，我发现当我将 dojoType='dijit.form.Select' 属性-值对添加到我的 html 元素（以声明方式执行此操作）时，dijit 实际上会呈现单行两列表。该表的第一个元素是一个跨度（具有类 dijitSelectLabel），我假设它只显示选定（或默认）元素。它的第二个元素似乎是一个呈现为向下箭头的按钮，它可以切换菜单项的显示以响应某些 DOM 事件。此外（我认为这很漂亮），dijit 实际上并没有将选择选项放置在 DOM 树中，直到其中一个事件被触发。在新的页面加载之后（在我单击任何内容之前），我在 firebug 中查看了 HTML，而第二个选项在任何地方都找不到。然后，一旦我单击箭头按钮，就会出现 dijit.Menu 小部件，dijit 将 dijit.Menu 粘贴到 body 节点的末尾；在我单击其他位置后，Menu 小部件仍然是正文的 lastChild，现在它只是隐藏并且未附加到表单。选择小部件。

如果我只想根据用户选择的项目在 DOM 树中放置一个不同的 dijit.form 小部件，真的会这么复杂吗？

结论： 原来这是一个大小写问题。

dojo.connect(widget_obj, 'onChange', function_obj);

有效，而

dojo.connect(widget_obj, 'onchange', function_obj);

没有。

所以我是对的，我完全是愚蠢的。我假设因为在将 html 标记作为属性放入其中时，全小写版本有效，所以 Dojo 会以同样的方式对待它。这是有道理的，因为 dijit.form.Select 没有 .onchange 属性，但有 .onChange 属性。 （我最终坚持使用 .Select 而不是 .FilteringSelect ，因为我不会给我的用户任何他们可以输入内容的印象。）所以，我会回答你们中的哪一个（因为你们俩在你的帖子中有 onChange，我想我只是太缺乏经验，没有意识到这个案子很重要）？

Answer 1

对于通过网络搜索找到此页面的其他人，您可能犯了与我相同的错误 .. 复制粘贴您的标记，使每个标记都具有相同的“价值”。

例如

<select dojoType='dijit.form.Select' onChange="fn">
<option value='foo'>Foo 1</option>
<option value='foo'>Foo 2</option>
<option value='foo'>Foo 3</option>
</select>

fn() 永远不会被调用，因为更改处理程序代码会根据先前选择的值检查新值，并且不会触发 onChange，除非它被更改。

Answer 2

在您的代码中，您将处理程序连接到 dom 节点的“onchange”事件，而不是 dojo 小部件。 dojo.query 返回一个 NodeList 对象 - 与查询匹配的节点集合。
在这种情况下，连接到小部件的“onChange”事件更可靠，如 GoinOff 所示。只需对他的回答进行一点补充，以确保您正确执行此操作。
假设这是您的 html（在 Dojo 的更高版本中，dijit.form.Select 已替换为 dijit.form.FilteringSelect）：

<input dojoType="dijit.form.FilteringSelect" id="stateInput" store="stateStore" searchAttr="name" name="state"/>

然后您将通过这种方式连接到“onChange”（您也可以将连接存储在某个数组中，以便稍后断开连接，正如 GoinOff 建议的那样）：

dojo.addOnLoad (function () {
   dojo.connect(dijit.byId("stateInput"), "onChange", function(){});
}

但如果您不知道小部件的 id 并想使用 dojo.query 连接到多个小部件，那就另当别论了。

Answer 3

在执行 dojo.connect 时尝试以下操作：

  var inputEvents = [];  //Global var

  inputEvents.push(dojo.connect(dijit.byId(inputFldStr), "onChange", eventFuncObj));

将连接存储在全局变量中。