Can: Falscher Klickhandler?

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.

  1. 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...

    1.   	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 benutz normaler Weise direkt obj.click(function), daher hab ich keine erfahrung mit obj,on(), quasi kann das folgende mist sein.  
      Mit `this.div = $("<div><span class='hello'>Say Hello!</span></div>");`{:.language-javascript} erzeugst du zwar ein paar tolle Elemente, aber mit  
      ~~~javascript
      $(document).on( "click", self.div.find(".hello"),function(){  
       					alert("HELLO");  
       					self.div.find(".hello").attr("class","was").text("Say was");  
       				});
      

      Suchst du doch innerhalb des Dokuments oder?

      $("body").append(oo.div);
      Eingehangen werden sie erst nach dem Konstruktor-Aufruf.

      MfG
      bubble

      --
      If "god" had intended us to drink beer, he would have given us stomachs. - David Daye