SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    May 2008
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    addEventListener after document.createElement

    I am using the SitePoint Simply Javascript book to build an app and it has been very helpful, usually if I get suck i can search the web and find the solution but this one has stumped me, and yes it involves IE .

    Here is the Idea:

    Create multiple image elements on the page that when clicked return their properties that are created in another div. Here is a simple breakdown.
    1. text is typed and submit button is clicked.
    2. form is submitted to a php element that add info to database and builds text as an image.
    3. returned information is populated and eventlistener is added to image.
    4. when image is click it sends info to php that query's database and returns image info into another div.
    5. there can be any number of text/images added.


    So far the code I have works in everything but IE and I have narrowed it down to a specific addEventListener.

    The problem is, that when a new element is added and the addEventListener is fired again to recognize the newly added element, nothing happens in IE. I get the new image but the eventListener isn't there.

    I should note that I have another eventLIstener for the same elements that fires on page reload. I guess I could make the page reload to add an eventListener for the new element but, what would be the point of javascript if I did that, and also I will never let the crappiness of IE win.

    here is a sample of my code:

    Code JavaScript:
     
    writeUpdate: function(responseXML)
    		{
    			//parse through xml file produded by process-text.php and assign variables
    			var theText = responseXML.getElementsByTagName("text")[0];
    			var theTextNode = theText.firstChild;
    			var text = theTextNode.nodeValue;
     
    			var textId =  responseXML.getElementsByTagName("id")[0];
    			var textIdNode = textId.firstChild;
    			var id = textIdNode.nodeValue;
     
     
    			//build variables into a link
    			var url = "lib/build-image.php?text=" + text;
    			//get art area of where images should populate
    			var designText = document.getElementById("art-area");
    			//create image link
    			var textLink = document.createElement("a");
    			textLink.setAttribute("href", "#");
    			designText.appendChild(textLink);
    			//create image element and populate with returned info
    			var textImage = document.createElement("img");
    			textImage.setAttribute("src", url);
    			textImage.setAttribute("id", id);
    			textImage.setAttribute("class", "text");
    			textLink.appendChild(textImage);
    			//clear div to populate second div area
    			var toolPalette = document.getElementById("textProperties");
    			while (toolPalette.hasChildNodes())
    			{
    				toolPalette.removeChild(toolPalette.firstChild);
    			}
     
    			//build variables into its tool
    			var url = "lib/build-image.php?text=" + text;
    			//create link for second div area
    			var textLink = document.createElement("a");
    			textLink.setAttribute("href", "#");
    			toolPalette.appendChild(textLink);
    			//create image and populate with info for second div area
    			var textImage = document.createElement("img");
    			textImage.setAttribute("src", url);
    			textImage.setAttribute("id", "text-" + id);
    			textImage.setAttribute("class", "text");
    			textLink.appendChild(textImage);
     
    			//refire clicklistener on all class"text" elements
    			//for every element with the class"text" add a click listener
    			var textLinks = Core.getElementsByClass("text");
    			for (var j = 0; j < textLinks.length; j++)
    			{
    				Core.addEventListener(textLinks[j], "click", LoadProperties.textClickListener);
    			}
     
    		},

    any help would be greatly appreciated!!
    Thank you

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Should it not be
    Core.addEvent
    ?

    addEventListener is non-IE, IE supports attachEvent, and I suspect that the addEvent method wraps both of them.

  3. #3
    SitePoint Member
    Join Date
    May 2008
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by jimfraser View Post
    Should it not be
    Core.addEvent
    ?

    addEventListener is non-IE, IE supports attachEvent, and I suspect that the addEvent method wraps both of them.
    The Core.addEventListener method is from the Core library used with the SitePoint Simply Javascript book. And yes you are correct this method wraps both the addEventListener and attachEvent into one handy dandy function. I really like this book and have learned a ton from it but, I am still very new to javascript programming.

    I suspect (after working on my app in other areas) that the solution may lie in passing the necessary properties to a separate method that will re-add the eventListener but, I would hope I could cut down on the markup by using the same method twice.

    Or I may be going at this the wrong way entirely.

    thanks Jimfraser


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
  •