✔ ul-Liste dynamisch erweitern

ahykes

ahykes

Erfahrenes Mitglied
Hallo!
Lange habe ich rumprobiert und nichts auf die Beine gekriegt. Jetzt brauche ich hilfe.
Erstmal der Code:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
	
	function test(){
			var dirName 		= document.form.textfield2.value;
			motherHub			= document.getElementById(document.form.textfield.value);
			var newUlElement 	= document.createElement('ul');
			var newLiElement 	= document.createElement('li')

			newLiElement.appendChild(document.createTextNode(dirName));
			newLiElement.setAttribute('id', dirName);
			
			newUlElement.onclick = function (){ alert(newLiElement.id); }
			
			newUlElement.appendChild(newLiElement);
			motherHub.appendChild(newUlElement);
	}

</script>
</head>
<body>
<ul>
  <li id="1">1 
    <ul>
      <li id="1a">1a</li>
      <li id="1b">1b
        <ul>
          <li id="1b1" >1b1</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>
<form name="form" method="post" action="">
  <input type="button" name="Submit" value="los" onClick="test();">
  id 
  <input type="text" name="textfield">
  text: 
  <input type="text" name="textfield2">
</form>
</body>
</html>
Ich habe eine Mini-Liste die ich erweitern möchte. Dazu gebe ich die ID des Elements eine unter dem eine neue Liste erscheinen soll. Gleichzeitig gebe ich auch den Anzeigetext dafür ein. Wenn man auf den Text klickt, soll die ID des NEUEN Elements aufpoppen.
Das geht auch! Das Problem ist nur, dass auch die id des ÜBERGEORDNETEN Elements aufpoppt!:suspekt:
Ich habe hoffe ihr versteht was ich meine. Mache ich das irgendwie falsch?
Im Pringzip gehts mir nur datum die Liste sauber mit Javascript zu erweitern und mit einer sauberen onClick-Methode zu versehen.
 
Zuletzt bearbeitet:
Hallo ahykes,

das hat zunächst mal nichts mit dem dynamischen Einfügen zu tun, sondern mit dem Eventmodell. Schau dir dazu am besten mal folgenden Artikel an: http://www.quirksmode.org/js/events_order.html

Du solltest also das "Event Bubbling" an der richtigen Stelle unterbrechen. Das Vorhaben verkompliziert sich dadurch, dass das in fast jedem Browser anders funktioniert. Hier würde sich die Verwendung einer JavaScript-Bibliothek wie jQuery, Prototype etc. anbieten, da diese dir hier viel Arbeit abnehmen können.

Grüße, Matthias
 
HEy! Danke, ich werde das mir mal anschauen. Was die Sache etwas erleichtert: Bei uns im Intranet wird ausschließlich der IE verwendet.
-> Der Artikel ist sehr interessant.

## EDIT ##

Ich glaube es nicht! Das war genau das was ich gesucht habe! Vielen Dank!

HTML: 
			if(objectId != this.id){
				
				newLiElement.onclick = function (){ 
					window.event.cancelBubble = true;
					getDirContent(dataDir + this.id + "/" , this.id );
				} 
			}
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück