Question

I’m working on a custom dojo-widget. Within the widget I am creating some DOM-Nodes dynamically and connect functions to their events.

My code looks similar to this:

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);

Now, as you can probably guess from the comments, the event on the conditionally nested element doesn’t get triggered.

Even when i commented out the connect on treeItem (which works by the way), I had no success. I tried treeItemExpander.onclick = function () {...} to no avail as well. The only thing that worked, but makes no sense in a widget was treeItemExpander.setAttribute("onClick", "alert('test');");.

Edit: I made a fiddle with the issue: http://jsfiddle.net/YCJ6X/

Edit: jovica (at the dojo-IRC) found out that the problem does not occur in Chrome on ubuntu.

So how do I get an event attached to that image?

Answer 1

Answered by beuss on the Dojo-IRC:

Modifying innerHTML changes previously appended DOM nodes as well. Appending a text node instead of writing the text directly solves the issue.

Updated fiddle: http://jsfiddle.net/YCJ6X/1/