JavaScrip dynamische Elemente und Events

amiga-news.de Forum > Programmierung > JavaScrip dynamische Elemente und Events

[ - Search - New posts - Register - Login - ]

-1-

[ - Post reply - ]

2009-02-11, 12:18 h

Mad_Dog
Posts: 1944
User

Hallo,

Ich möchte im Rahmen einer Ajax-Anwendung dynamisch HTML-Elemente, wie z.B. buttons in den DOM-Baum eines HTML-Dokuments einfügen und gleichzeitig diesen Elementen JavaScript-Eventhandler hinzufügen.

So lange die per Eventhandler aufzurufende Funktion keine Parameter braucht, kann man das ja einfach so machen:

html code:

var button = document.createElement("input");
	var button_type = document.createAttribute("type");
	var button_caption = document.createAttribute("value");
	
	button_type.value = "button";
	button.setAttributeNode(button_type);	
	button_caption.value = "foo button";
	button.setAttributeNode(button_caption);
	button.onclick	= foo;

Hier wird einfach den Attribut "onclick" der Wert "foo" (das soll der Name der aufzurufenden Funktion sein) zugewiesen. Das geht aber nur, solange die aufzurufende Funktion keine Parameter hat.

Um das irgendwie zu umgehen, hab ich mir folgendes ausgedacht:

html code:

<html>

<head>

<title>foo</title>

<script language="JavaScript" type="text/javascript">

function foo(bar)
{
	alert("foo = " + bar);
}

function createButton(value,event)
{
	var button = document.createElement("input");
	var button_type = document.createAttribute("type");
	var button_caption = document.createAttribute("value");
	var button_event = document.createAttribute("onClick");
	
	button_type.value = "button";
	button.setAttributeNode(button_type);	
	button_caption.value = value;
	button.setAttributeNode(button_caption);
	button_event.value	= event;
	button.setAttributeNode(button_event);
	
	return button;
}

function init()
{
	var span_42 = document.getElementById(42);

	var foo_button = createButton("foo button","foo(42);");
	var bar_button = createButton("bar button","foo(23);");
	
	span_42.appendChild(foo_button);
	span_42.appendChild(bar_button);
}

</script>

</head>

<body onLoad="init()">

<h1>foo</h1><br>

<span id="42"></span>

</body>

</html>

Das Problem: Das funktioniert nur mit Firefox. Internet Explorer macht das leider nicht mit.

Wichtig ist eben, daß die Elemente nicht statisch im HTML-Dokument stehen sollen, sondern dynamisch hinzugefügt werden, weil ich in der Anwendung ein XML-Dokument parse und dann entsprechend dynamisch HTML-Objekte, wie z.B. Buttons mit Event-Handler einfügen möchte.
Und diese Event-Handler sollen eben auch Funktionen mit Parametern aufrufen können.

Hat irgend jemand eine Idee, wie man das lösen könnte?

--
http://www.norman-interactive.com

[ - Answer - Quote - Direct link - ]

2009-02-11, 21:00 h

Holger
Posts: 8116
User

html code:

<html>
<head>
<title>foo</title>
<script language="JavaScript" type="text/javascript">

function foo(bar)
{
  alert("foo = " + bar);
}

function createButton(value,eventHandler)
{
  var button = document.createElement("input");

  button.type    = "button";
  button.value   = value;
  button.onclick = eventHandler;

  return button;
}

function init()
{
  var span_42 = document.getElementById(42);

  var foo_button = createButton("foo button", function() { foo(42); });
  var bar_button = createButton("bar button", function() { foo(23); });
  
  span_42.appendChild(foo_button);
  span_42.appendChild(bar_button);
}

</script>
</head>

<body onLoad="init()">

<h1>foo</h1><br>

<span id="42"></span>
</body>
</html>

--
Good coders do not comment. What was hard to write should be hard to read too.

[ Dieser Beitrag wurde von Holger am 12.02.2009 um 16:39 Uhr geändert. ]

[ - Answer - Quote - Direct link - ]

2009-02-12, 15:33 h

Mad_Dog
Posts: 1944
User

@Holger:

Danke! Das funktioniert prima!

Nur eine kleine Korrektur zu Deinem Beispielcode (für alle anderen, die das als Lehrbeispiel nehmen wollen):

html code:

function createButton(value,eventHandler)
{
  var button = document.createElement("input");

  button.type    = "button";
  button.value = value;
  button.onclick = eventHandler;

  return button;
}

button.value wurde in Deinem Beispiel ein fester String anstatt dem Wert aus dem Parameter value der Funktion zugewiesen.

--
http://www.norman-interactive.com

[ - Answer - Quote - Direct link - ]

2009-02-12, 16:39 h

Holger
Posts: 8116
User

Zitat:
Original von Mad_Dog:
button.value wurde in Deinem Beispiel ein fester String anstatt dem Wert aus dem Parameter value der Funktion zugewiesen.

Hab's geändert.

mfg

--
Good coders do not comment. What was hard to write should be hard to read too.

[ - Answer - Quote - Direct link - ]

-1-

[ - Post reply - ]

amiga-news.de Forum > Programmierung > JavaScrip dynamische Elemente und Events

[ - Search - New posts - Register - Login - ]