Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL]
<HTML>
<head>
<style type="text/css">
/* CSS for the demo. CSS needed for the scripts are loaded dynamically by the scripts */
*.*{
margin:0px;
padding: 0px;
}
#mainContainer{
width:100%;
margin:0 auto;
margin-top:10px;
border:1px solid #000;
}
#newscol1{
width:20%;
height:800px;
float:left;
border:1px solid red;
background-color:#E2EBED;
margin-right:10px;
padding: 10px;
}
#newscol2{
width:25%;
height:800px;
float:left;
border:1px solid red;
background-color:#E2EBED;
margin-right:10px;
padding: 10px;
}
#newscol3{
width:30%;
height:800px;
float:left;
border:1px solid red;
background-color:#E2EBED;
margin-right:10px;
padding: 10px;
}
#countries{
width:30%;
float:left;
border:1px solid red;
background-color:#E2EBED;
}
.dragableBox{
width:100%;
height:170px;
border:1px solid #000;
background-color:#FFF;
margin-bottom:5px;
font-weight:bold;
text-align:center;
}
#menu{
height:100px;
width:100%;
border: solid 1px black;
background-color:grey;
color:white;
padding:10px;
}
.dropBox{
width:190px;
border:1px solid #000;
background-color:#E2EBED;
height:400px;
margin-bottom:10px;
padding:3px;
overflow:auto;
}
a{
color:#F00;
}
.clear{
clear:both;
}
img{
border:0px;
}
.dragbar{
border:solid 1px red;
float:left;
height:15px;
width:82%;
cursor:move;
background-color:#33EBED;
margin:2px;
}
.closebutton{
margin:2px;
border:solid 1px red;
float:right;
height:15px;
width:12%;
cursor:pointer;
background-color:#33EBED;
}
.contentDiv{
clear:left;
clear:right;
border:solid 1px red;
height:150px;
width:100%;
background-color:#d3d3d3;
}
</style>
<script type="text/javascript">
function addNewsItem(boxId, closeId, contentId, title){
newText = document.createTextNode(title)
newDragDiv=document.createElement("div");
newDragDiv.setAttribute("id", closeId);
newDragDiv.className = "dragbar";
newDragDiv.appendChild(newText);
newCloseDiv=document.createElement("div");
newCloseDiv.setAttribute("id", closeId);
newCloseDiv.className = "closebutton";
newCloseDiv.innerHTML = "X";
if(newCloseDiv.addEventListener){
newCloseDiv.addEventListener("click", closeNewsItems, false);
}
else if(newCloseDiv.attachEvent) {
newCloseDiv.attachEvent("onclick", closeNewsItems);
}
else{
newCloseDiv.onclick = closeNewsItems;
}
newContentDiv=document.createElement("div");
newContentDiv.setAttribute("id", contentId);
newContentDiv.className = "contentDiv";
newDiv = document.createElement("div");
newDiv.className = "dragableBox";
newDiv.setAttribute("id", boxId);
newDiv.setAttribute("name", title);
document.getElementById("dropContent2").appendChild(newDiv);
document.getElementById(boxId).appendChild(newDragDiv);
document.getElementById(boxId).appendChild(newCloseDiv);
document.getElementById(boxId).appendChild(newContentDiv);
dragDropObj.addSource(boxId,true);
dragDropObj.init();
}
function closeNewsItems() {
alert(this.parent.name);
}
</script>
</head>
<body onload="startApp();">
<div id="menu">
<button onclick="addNewsItem('id1', 'closeid1', 'contentid1', 'test1');" style="margin:5px; margin-left:15px;">Insert New Item</button>
<button onclick="addNewsItem('id2', 'closeid3', 'contentid3', 'test2');" style="margin:5px; margin-left:15px;">Insert New Item</button>
<button onclick="addNewsItem('id3', 'closeid3', 'contentid3', 'test3');" style="margin:5px; margin-left:15px;">Insert New Item</button>
</div>
<div id="mainContainer">
<div id="newscol1">
</div>
<div id="newscol2">
<div id="dropContent2">
</div>
</div>
<div id="newscol3">
<div id="dropContent3">
</div>
</div>
</div>
</body>
</html>I put this together to show the problem I am having.
I'm working on a page that creates elements and attaches events to those elements. I'm assuming IE attaches events to something named "doControlSetup" when an object is created using appendchild and has an event attached to it. What would be the best way to get the correct elements for this.parentNode?
click on the "insert new item" then click on the div that has the letter "x" that was created by the insert item button. It will alert the parent element name which on my IE browser is "doControlSetup". ParentNode seems to work on safari and firefox. I tried searching for doControlSetup on google as well as other searches im sort of stuck.