Falscher Klickhandler?

[Can]

Hallo Leute,

mir ist nicht klar, wieso der Klick Event von der Klasse hello ausgeführt wird,
obwohl ich die Klasse wechsle... Der JQuery Befehl "on" sollte doch den Handler
binden... (Für dieses Beispiel mindestens Jquery 1.7 benötigt)

Der Code:

  	var obj = function(){  
  	  
  		this.div = $("<div><span class='hello'>Say Hello!</span></div>");  
  		var self = this;  
  		  
  		this.div.find(".hello").on("click", function(){  
  			alert("HELLO");  
  			self.div.find(".hello").attr("class","was").text("Say was");  
  		});  
  		  
  		this.div.find(".was").on("click", function(){  
  			alert("HELLO");  
  			self.div.find(".was").attr("class","hello").text("Say Hello!");  
  		});  
  		  
  	};  
    
  	var o = new obj();  
    
  	$("body").append(o.div);  

>   
> Danke im voraus für Tipps.  
  
Ich bin selber etwas weitergekommen:  
~~~javascript
  
			var obj = function(){  
			  
				this.div = $("<div><span class='hello'>Say Hello!</span></div>");  
				var self = this;  
							  
				$(document).on( "click", self.div.find(".hello"),function(){  
					alert("HELLO");  
					self.div.find(".hello").attr("class","was").text("Say was");  
				});  
				$(document).on( "click", self.div.find(".was"),function(){  
					alert("WAS");  
					self.div.find(".was").attr("class","hello").text("Say Hello!");  
				});  
  
				  
			};  
		  
			var oo = new obj();  
		  
			$("body").append(oo.div);  

Ich verstehe aber nicht wieso bei alerts hintereinander gezeigt werden...