javascript - 为什么连接的 onclick 事件不触发？

Question

我正在开发一个自定义 dojo-widget。在小部件中，我动态创建一些 DOM 节点并将函数连接到它们的事件。

我的代码看起来与此类似:

var treeItem = document.createElement("div");

if (current.children) // 'current' is set up like: { id: <int>, name: <string>[, children: <id-array>] }
{
    var treeItemExpander = document.createElement("img");
    [...] // stuff like setting classes and setting the path, nothing special
    dojo.connect(treeItemExpander, "onclick", function () { alert("test expander"); }); // problem line
    treeItem.appendChild(treeItemExpander);
}

treeItem.innerHTML += current.name;
dojo.connect(treeItem, "onclick", function () { alert("test item"); });

this.tree.appendChild(treeItem);

现在，正如您可能从注释中猜到的那样，条件嵌套元素上的事件不会被触发。

即使我注释掉了 treeItem 上的连接(顺便说一句，它可以工作)，我也没有成功。我尝试了 treeItemExpander.onclick = function () {...} 也无济于事。唯一有效但在小部件中毫无意义的是 treeItemExpander.setAttribute("onClick", "alert('test');");。

编辑:我摆弄了这个问题:http://jsfiddle.net/YCJ6X/

编辑:jovica(在 dojo-IRC)发现 ubuntu 上的 Chrome 中不会出现该问题。

那么如何将事件附加到该图像？

Answer 1

由 beuss 在 Dojo-IRC 上回答:

修改 innerHTML 也会更改之前附加的 DOM 节点。附加文本节点而不是直接写入文本可以解决该问题。

更新的 fiddle :http://jsfiddle.net/YCJ6X/1/