# jQuery click function nur einmal ausführbar?



## OloX (1. August 2010)

Hallo,
nach Klicken auf ein Element, sind die neu erstellten Elemente nicht mehr "anklickbar".
Habe schon probiert und gesucht, es will einfach nicht 

*test.js*

```
/*
 *
 *	Built for jQuery library
 *	http://jquery.com
 *
 */
 
(function($) {

	$.fn.pageedit = function(options){
	  
		// default configuration
		var defaults = {			
			linkCon:  'links_container',
			inhalt:   [ "google.de", "tutorials.de", "hardwareluxx.de", "w3.org" ]
		}; 
		
		var options = $.extend(defaults, options);  
				
		this.each(function() {  
			var obj = $(this); 
				
			function ini_sites_links(){
				$('#'+options.linkCon).empty();
				for (var i = 0;i < options.inhalt.length; i++){
					if(options.inhalt[i] != '')
					$("<span/>", { class: "pagenav-off", text: options.inhalt[i], id: "site_"+ i, "data-page":i }).appendTo('#'+options.linkCon);
				}
			};

			function del_site(i){
				alert('remove -> '+options.inhalt[i]);				
				options.inhalt[i] = '';
				ini_sites_links(); // wichtg! <-- 				
			};				

			ini_sites_links();
			
			$('#'+options.linkCon+' > span').click(function(){		
				var i = $(this).attr("data-page");
				del_site(i);				
			});	
						
			
		});
	  
	};

})(jQuery);
```


```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>jQuery</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="test.js"></script>
<script type="text/javascript">
$(document).ready(function(){	
	$("#temp").pageedit();
});
</script>
<style type="text/css">

body {background-color:#F5F5F5;color:#555;font-family:Arial,Helvetica,sans-serif;font-size:12px; margin:30px;}
span.pagenav-on, span.pagenav-off {-moz-border-radius:3px; -webkit-border-radius:3px;padding: 3px 8px 3px 8px; margin: 30px 2px 30px 2px;outline:none;}
span.pagenav-on {color: #6e7c7f; border: 1px solid #cbd6dc; background: #f0f7fb; font-weight:bold;}
span.pagenav-off {color: #7d7d7d; border:1px solid #e2e2e2; background:#efefef;}
</style>
</head>
 <body>
 
  <div id="links_container"></div>  
  <div id="temp"> 
  </div>   
 
 </body>
</html>
```

Wär sehr dankbar für jede Hilfe...

MfG


----------



## Sven Mintel (2. August 2010)

Moin,

du nimmst die Zuweisung des click-Events nur beim initialen Aufruf von pageedit() vor.

Später löschst du alle Elemente, und erzeugst die verbliebenen neu...weist den click-Event jedoch nicht zu.

Ferner: *class* ist ein reserviertes Wort in JS.
Notiere es statt so:
	
	
	



```
$("<span/>", { class: "pagenav-off",
```
...besser so:

```
$("<span/>", { 'class': "pagenav-off",
```
...sonst läufst du Gefahr, dass einige Browser die Arbeit dort wegen eines Syntaxfehlers komplett verweigern.

P.S.: Danke für die komfortable Bereitstellung des benötigten Codes, so macht es Spass, zu Helfen


----------



## OloX (4. August 2010)

Hey Sven Mintel,
Besten dank für deiner ausfürlichen Hilfe 
Und natürlich auch für den Tip 

PS. Das ist doch selbstverständlich! 

Gürße


----------

