PDA

View Full Version : cloneNode() and Attaching Events

Eskimo
06-23-2005, 06:10 PM
If a created element:

var newEl = document.createElement("input")
newEl.type = "button"
newEl.value = "I'm a button"
newEl.onclick = function(){..blah..}


is then cloned (http://www.mozilla.org/docs/dom/domref/dom_el_ref35.html#1028396) and inserted into several places in a page:

for(var i=0;i<object.childNodes.length;i++) {
var thisKid = object.childNodes[i]
if(thisKid.tagName=="DIV")
thisKid.insertBefore(newEl.cloneNode(false|true),thisKid.childNodes[0])
}


Will the onclick be cloned as well? I'm havening trouble getting it to fire and am unsure as to what I'm doing wrong.
Kor
06-23-2005, 06:16 PM
if dynamic created, why clone the element? Just append it.
Eskimo
06-23-2005, 06:26 PM
The element won't get placed into multiple locations, it will just end up in the last place it gets inserted.

Unless I'm missing something, which I will gleefully atone for the moment I can get this to work.
jkd
06-23-2005, 07:48 PM
onclick I believe is cloned. There was some broohaha over the fact that events added via addEventListener weren't cloned - but there is no way to represent those events via markup precisely, so that is fair.

But onclick is an attribute, which should be cloned.

Try sticking an alert() in the handler, and see what happens. Also, you could force it to think it is an attribute:

newEl.setAttribute("onclick", "alert('hello world!')");
Eskimo
06-23-2005, 11:13 PM
setArrtibute works like a charm.

I have an example page set up here (http://dci.us/onclick.asp).

All that really needed to be changed was how I was assigning the attribute.

newEl.onclick is not cloned
newEl.setAttribute() is cloned

var newEl = document.createElement("input")
newEl.type = "button"
newEl.value = "I'm a button"
newEl.setAttribute("onclick","alert('hellow world')");


thank you
Eskimo
06-24-2005, 12:16 AM
...I guess I never even tested it in IE...but it doesn't work. Any clues of how to accomplish this?
enumerator
06-24-2005, 12:28 AM
newEl.setArrtibute= function(){..blah..}
It looks like you're treating setAttribute as a property, but it's a method()...
Eskimo
06-24-2005, 12:31 AM
well..yes in my example above I failed to implement it correctly, but on the page I linked to it was correctly done.

newEl.setAttribute("onclick","gotme(this)")

I'll change the post above to reflect the correct syntax.
enumerator
06-24-2005, 12:33 AM
In IE, event handlers are function objects, so try using an anonymous function (or Function) as the second parameter...
Eskimo
06-24-2005, 12:38 AM
newEl.setAttribute("onclick",function(){gotme(this)})

Nope...

mmmm. This seems like it should be real easy to do...which is what makes me believe I'm missing something.
enumerator
06-24-2005, 12:56 AM
I remember now... it works when cloning an existing element. You may have to assign the events after adding the elements to the document (or a documentFragment), or add the first one, set the attribute, get a reference, and clone it... :D

This too:
<body>
<script>
var e = document.createElement("<input type=button value=foo onclick=alert('hmm...')>");
document.body.appendChild(e.cloneNode(true));
</script>
</body>