0 Replies - 538 Views - Last Post: 27 March 2009 - 10:36 AM

#1 JasonMcAuley  Icon User is offline

  • D.I.C Head

Reputation: 3
  • View blog
  • Posts: 144
  • Joined: 10-April 08

Overwriting events with dynamic HTML

Posted 27 March 2009 - 10:36 AM

The following code is giving me an issue in which my event is always being overwritten.

I am essentially adding form elements dynamically and attaching an event to each DOM node. You will notice in the addNewspaper() method that I am getting a element by id and attaching an event to it. The event is to delete a node by clicking its "Remove Element" text.

The issue I am having is that the event is being overwritten and only applies to the LAST DOM node. I don't really understand why as I am assigning the event to each element by ID. I confirmed that it is passing a different ID on every event add. It is somehow overwriting this event every time a new node is added. I simply tried taking out the delete functionality and had it do something simple like an alert, and the event is still only bound to the last element.

Any help would be appreciated!

		
function addNewspaperBlock( i ){
	
	var newspaperHTML = "";
	
	newspaperHTML += "<div id = 'newspaperContainer"+i+"'>";
	newspaperHTML += "<table width = '95%'>";
	newspaperHTML += "<tr><td width ='12%' valign='top'>Newspaper #" + i + "</td>";
	newspaperHTML += "<td valign='top' width='30%'><select name = 'ddlNewsPaperName" + i + "'><option>" + "test" + "</option></select></td>";
	newspaperHTML += "<td valign='top' width='40%'><div name='subControls" + i + "' class='innerBody'></div></td>";
	newspaperHTML += "<td valign='top' width='13%'><p id='removeElement"+i+"'>Remove Element</p></td></tr>";
	newspaperHTML += "<tr><td valign='top' colspan='5'></td></tr></table>";
	newspaperHTML += "</div>";
	
	return newspaperHTML;
	
}
	



var ctr = 1; //Newspaper object count
var arrPapers = []; //Array of newspaper objects


//Method to create a newspaper object and render it on the page
this.addNewspaper = function() {

	//Declare a new newspaper instance, pass it the HTML template for this object
	var a = new NewsPaper(addNewspaperBlock( ctr ) );
	
	//Assign paper object to the array of objects
	arrPapers[ctr] = a;
		
	//Render out the newspaper to the element supplied as an argument
	a.renderNewspaper('content');
	
	//Add event that will allow for deletion of a newspaper
	
	var removeElement = 'removeElement' + ctr;
	var newspaperContainer = 'newspaperContainer' + ctr;
	
	 eventAdd(removeElement, 'click', function(){
		
		var newsPaperClosure = newspaperContainer;
		
		return function(){
			removeNewspaper(newsPaperClosure);
		}
		 
		
	}());
	

	eventAdd(removeElement, 'click', function(){
								return removeNewspaper(newspaperContainer);
							});

	 
	//Increase the paper object counter
	ctr += 1;
}


//Attach event to control on page that will create a new newspaper
this.eventAdd = function (){
	
	if (window.addEventListener){
			return function(el, type, fn){
				var eventEl = document.getElementById(el);
				alert(eventEl.getAttribute('id'));
				eventEl.addEventListener( type, fn, false );
			}
	}
}();


this.removeNewspaper = function ( el ){
				
				var removeEL = document.getElementById(el)
				removeEL.parentNode.removeChild(removeEL);
				
	   }

eventAdd('add-element', 'click', function(){addNewspaper()});






The HTML


	<div id="doc"> 
	  
	  <div id="content">
			
	  </div>
	  <p id="add-element">Add Elements</p>
	</div>


This post has been edited by JasonMcAuley: 27 March 2009 - 10:38 AM


Is This A Good Question/Topic? 0
  • +

Page 1 of 1