adding nodes with events

**Trinithis** · 06-02-2007, 03:06 AM

Is there a way to create elements with events and have them be kept when appended to the page?

var body = document.getElementsByTagName("body")[0];
var node1 = document.createElement("span");
node1.appendChild(document.createTextNode("666"));
node1.onclick = "alert(666)";
body.appendChild(node1.cloneNode(true));
body.appendChild(node1);
//Neither alert 666 when clicked

**jscheuer1** · 06-02-2007, 06:34 AM

This:

Code:

node1.onclick = "alert(666)";

won't assign an onclick event even to an existing element. It is only assigning a string to the onclick attribute. Try:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>
<body>
<script type="text/javascript">
var node1 = document.createElement("span"), func1 = function(){alert(666);};
node1.appendChild(document.createTextNode("666"));
node1.onclick = func1;
document.body.appendChild(node1);
</script>
</body>
</html>

**Twey** · 06-02-2007, 07:51 AM

Or simply:

Code:

node1.onclick = function() { alert("666"); };

instead of using a string. The key point is that it must be a function, not a string.

**jscheuer1** · 06-02-2007, 03:31 PM

Or, even more simply (Opera Only, as far as I know):

Code:

node1.onclick = alert;

Opera alerts:

[object MouseEvent]

as alert, by itself there is a predefined function and the event is assumed as its parameter.

**Trinithis** · 06-02-2007, 03:36 PM

Hmm, neither are working for me. I'm currently recoding my view object script and am removing innerHTML from my code at the same time.

Here's a piece of my code that I created for my static object ObjectWindow and whenever an instance is made, I clone nodes, in this case I clone ObjectWindow.optionsBox. (I am not using prototypes because the nodes have to be cloned anyway.)

Code:

ObjectWindow.optionsBox.closeAnchor = document.createElement("a");
ObjectWindow.optionsBox.closeAnchor.href = "javascript:void(0);";
ObjectWindow.optionsBox.closeAnchor.onclick = function() {ObjectWindow.close(this.parentNode.parentNode.id);}
ObjectWindow.optionsBox.closeAnchor.appendChild(document.createTextNode("close"));
ObjectWindow.optionsBox.appendChild(ObjectWindow.optionsBox.closeAnchor);

**mburt** · 06-02-2007, 03:41 PM

Is ObjectWindow.close() a function?

**Trinithis** · 06-02-2007, 03:43 PM

Originally Posted by mburt

Is ObjectWindow.close() a function?

Yep. Just to make sure that was not the problem, I tried two things. First, I changed the onclick to a simple thing like alert(). Secondly, I tried making a non-cloned instance of the tag and added the event after it was appended, and that worked...

**jscheuer1** · 06-02-2007, 03:47 PM

close() is a reserved function/method for closing windows and documents. That could be a part of the problem. Use a non-reserved name for your close function. Also, even with an href of javascript:void(0);, you still need the onclick event to return false.

**Trinithis** · 06-02-2007, 03:58 PM

I think I know what is happening. I tried appending the original ObjectWindow.optionsBox to the document as is, and it worked fine. Then I added a cloned version of it to the document, and it failed to work. I believe cloned nodes do not keep their events. I also tried using addEventListener too. I think I will have to code a version of cloneNode that keeps events.

**jscheuer1** · 06-02-2007, 04:41 PM

Why would you want to clone a just created node anyway? If you need more than one of the same type, use a loop to create them. You are right about cloning the created node not preserving the event. If it is a hard coded node with a hard coded event though, that works.

Thread: adding nodes with events

Thread Tools

Search Thread

adding nodes with events

Bookmarks

Bookmarks

Posting Permissions