Why do these eventlisteners stop listening after firing a funcion once?

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Dick Brouwers
    #1

    Why do these eventlisteners stop listening after firing a funcion once?

    Hi, i think i'll try to be a little bit more specific than i was in my last post. I created a few divs with images that i get from a xml file.
    After I created them, i binded them to an event using the folowing function.

    Code:
    function addEvent(target,eventType,eventHandler) {
	if (target.addEventListener) // W3C
		target.addEventListener(eventType,eventHandler,false);
	else if (target.attachEvent) // IE
		target.attachEvent('on'+eventType,eventHandler);
}
    It seems like the images loose their binding to the eventhandler as soon there is content in the div: viewImage. I can't click another image to change the content of viewImage. When I call the function removeNode from an external button, it will empty the div, and I can load other content again.
    I can't call removeNode() at the start of my function showImage() though.

    Creating 4 images with inline onclick methods works well too.

    Code:
    <body>
<div id="myImages"></div>

<button onclick="removeNode()">removeNode</button>
<script type="text/javascript">

var imageBankXhr = XHR();

imageBankXhr.open('get', 'imagebank.php', false);
imageBankXhr.send(null);

var myXmlFeed = imageBankXhr.responseXML;
var imageBank = myXmlFeed.documentElement.childNodes;
var aFragment = document.createDocumentFragment();
for (var i=0; i<imageBank.length; i++) {
	var newDiv = document.createElement('div');
	newDiv.className = 'myImage';
	var newImage = document.createElement('img');
	newImage.src = imageBank[i].childNodes[0].childNodes[0].nodeValue;
	newImage.imageid = imageBank[i].attributes[0].nodeValue;
	newImage.caption = imageBank[i].childNodes[1].childNodes[0].nodeValue;
	newDiv.appendChild(newImage);
	aFragment.appendChild(newDiv);
}
document.getElementById('myImages').appendChild(aFragment);

// making the images clickable
var myImageDivs = document.getElementById('myImages').childNodes;
for (var i=0; i<myImageDivs.length; i++) {
	
	addEvent(myImageDivs[i].getElementsByTagName('img')[0], 'click', showImage);
}

function showImage(e) {
	var target = e.target || e.srcElement;
	var newDiv = document.createElement('div');
	newDiv.id = 'viewImage';
	var newText = target.caption;
	newDiv.innerText = newText;
	newDiv.textContent = newText;
	document.body.appendChild(newDiv);
	
}
function removeNode() {
        if (document.getElementById('viewImage') !== null) {
		var oldDiv = document.getElementById('viewImage');
		oldDiv.parentNode.removeChild(oldDiv);
	}
}
</script>
</body>
    Tags: None
    • Dormilich
      Recognized Expert Expert
      • Aug 2008
      • 8694
      #2
      the problem is the div ID. you assign it multiple times (each time, showImage() is called), which is simple wrong (ids must be unique).

      IE won’t execute showImage() properly (e is undefined => you have to use the event object e = e || window.event

        Comment

        • Dick Brouwers
          #3
          Hi, thanks for the reply, but this doesn't work either. Using the id=viewImage did work fine when using inline eventbinding inside an <img> tag unfortunately that is not what i am looking for.

          Code:
          function showImage(e) {
	var target = e.target || e.srcElement;
	var newDiv = document.createElement('div');
	newDiv.className = 'viewImage';
	var newText = target.caption;
	newDiv.innerText = newText;
	newDiv.textContent = newText;
	document.body.appendChild(newDiv);
}

            Comment

            Previous template Next
            Working...