amiga-news ENGLISH VERSION
.
Links| Forum| Kommentare| News melden
.
Chat| Umfragen| Newsticker| Archiv
.

amiga-news.de Forum > Programmierung > JavaScrip dynamische Elemente und Events [ - Suche - Neue Beiträge - Registrieren - Login - ]

-1- [ - Beitrag schreiben - ]

11.02.2009, 12:18 Uhr

Mad_Dog
Posts: 1944
Nutzer
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

[ - Antworten - Zitieren - Direktlink - ]

11.02.2009, 21:00 Uhr

Holger
Posts: 8038
Nutzer
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. ]

[ - Antworten - Zitieren - Direktlink - ]

12.02.2009, 15:33 Uhr

Mad_Dog
Posts: 1944
Nutzer
@Holger:

Danke! Das funktioniert prima! :bounce:

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

[ - Antworten - Zitieren - Direktlink - ]

12.02.2009, 16:39 Uhr

Holger
Posts: 8038
Nutzer
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.

[ - Antworten - Zitieren - Direktlink - ]


-1- [ - Beitrag schreiben - ]


amiga-news.de Forum > Programmierung > JavaScrip dynamische Elemente und Events [ - Suche - Neue Beiträge - Registrieren - Login - ]


.
Impressum | Datenschutzerklärung | Netiquette | Werbung | Kontakt
Copyright © 1997-2019 by amiga-news.de - alle Rechte vorbehalten.
.