javascript - 添加元素后 dom.byId 返回 undefined

Question

我有一个函数，可以将 div 作为子元素添加到 dijit/layout/conentpane 中。我遇到的问题是，添加此 div 后，我无法使用 dom.byId 引用它:创建此 div 的函数是从菜单项的单击事件调用的:

菜单项:

<div id="miLMWS" data-dojo-type="dijit/MenuItem" data-dojo-props="onClick:function(){SetPage('LMWS');}">Watershed</div>

onclick 函数(SetPage):

....

function (dom, parser, registry, ready, WatershedMap, OWOWMapGallery) {
            window.SetPage = function (pg) {
                //set the page depending on the menu item clicked
                ClearWidget();//destroys previous widget deleting the div
                AddToolDiv();//add the div
                switch (pg) {
                    case 'LMWS':
                        var test = dom.byId("tool"); //this is undefined
                        //WS = new WatershedMap({}, "tool");
                        break;
                }
            };
...

addDivFunction:

function AddToolDiv() {
     //add page div (node where template will be placed in
     var tool = document.createElement("div");
     tool.setAttribute("id", "tool");
     var ContentContainer = registry.byId("MainContent");
      ContentContainer.set("MainContent", tool);
      var test = dom.byId("tool");//this is undefined
 }

每次单击菜单项时，都会将新的自定义小部件加载到工具 div 中。 (有一个函数 ClearWidget 会销毁旧的小部件和工具 div)我想这可能与从 onClick 事件调用该函数有关？当我在页面首次加载时调用 AddToolDiv 时，测试变量正确引用了工具 div。任何帮助将不胜感激。

谢谢

Answer 1

byId 函数将在 DOM 中搜索具有给定 id 的元素。如果当您调用 byId 时，您的工具元素实际上尚未插入到 DOM 中，您将得到未定义的结果。

您显示的代码实际上从未将工具元素插入到 DOM 中，它仅将其传递给 ContentContainer.set("MainContent", tool) 调用。请务必检查此调用是否确实立即将工具元素插入到 DOM 中。当你调用byId时，ContentConainer本身是否插入到DOM中？