Page 1 of 3 123 LastLast
Results 1 to 10 of 22

Thread: adding nodes with events

  1. #1
    Join Date
    May 2007
    Location
    USA
    Posts
    373
    Thanks
    2
    Thanked 4 Times in 4 Posts

    Default adding nodes with events

    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
    Last edited by Trinithis; 06-02-2007 at 03:13 AM.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    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.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    May 2007
    Location
    USA
    Posts
    373
    Thanks
    2
    Thanked 4 Times in 4 Posts

    Default

    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);
    Last edited by Trinithis; 06-02-2007 at 03:45 PM.

  6. #6
    Join Date
    Jul 2006
    Location
    Canada
    Posts
    2,581
    Thanks
    13
    Thanked 28 Times in 28 Posts

    Default

    Is ObjectWindow.close() a function?
    - Mike

  7. #7
    Join Date
    May 2007
    Location
    USA
    Posts
    373
    Thanks
    2
    Thanked 4 Times in 4 Posts

    Default

    Quote Originally Posted by mburt View Post
    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...

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. #9
    Join Date
    May 2007
    Location
    USA
    Posts
    373
    Thanks
    2
    Thanked 4 Times in 4 Posts

    Default

    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.

  10. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •