sho: jquery verschachtelte events

hallöchen,

anbei ein schnipsel mit folgendem problem:
ich habe einen absatz. wenn man drauf klickt,
wird seine klasse weggenommen und er bekommt eine neue.
wenn man dann auf den absatz mit der neuen kallse klickt,
soll später eine andere aktion ausgeführt werden. leider
klappts SO wie unten zu sehen nicht. ich habe die beiden click events jetzt verschachtelt, vorher bereits nacheinander geschrieben. aber immer, wenn man ein 2.mal auf den gleichen absatz klickt, kommt das alert "klick1", obwohl er beim 2. mal die klasse "edit" gar nicht mehr hat. grrr. wie muss ich das verschachteln, wo return false o.ä. schreiben, damit das hinhaut?
danke..

  
<!DOCTYPE html">  
<html>  
    <head>  
	<script type="text/javascript" src="jquery.js"></script>  
	<style type="text/css">  
	<!--  
	html, body{  
		font-size:14px;  
	}  
	p.edit, p.inEdit{  
		width:7.4em;  
		white-space:nowrap;  
		font-size:1.2em;  
	}  
	p.inEdit{  
		background:yellow;  
		font-size:1.4em;  
	}  
	-->  
	</style>  
	<script type="text/javascript">  
	$(document).ready(function(){  
		$('p.edit').click(function () {  
			alert ("klick1");  
			$(this).removeClass('edit');  
			$(this).addClass('inEdit');				  
			  
				  
			$('p.inEdit').click(function () {  
				alert ("klick2");  
					//keypress listener  
				}			  
			);			  
		});  
	});  
	</script>  
	<head>  
	<body>  
		<ul id="testlist">  
			<li class="listitem">  
				<p class="edit" contenteditable="true">bearbeite mich1</p>  
			</li>  
			<li class="listitem">  
				<p class="edit" contenteditable="true">bearbeite mich2</p>  
			</li>  
		</ul>  
	</body>  
</html>  

  1. Hallo sho,

    ich würde da nicht an Verschachtelung denken, sondern über eine zusätzliche Klasse feststellen ob das Element bereits geklickt wurde. Die Ursprüngliche Klasse des Elements bleibt dabei erhalten.

    $(document).ready(function(){
        $('p.edit').click(function () {
            if ( $(this).hasClass('inEdit') ) {
                alert('klick2');
                //keypress listener
            }
            else {
                alert('klick1');
            }
            $(this).toggleClass('inEdit');
        });
    });

    Die CSS-Anweisungen musst Du noch dementsprechend anpassen.

    Ich hoffe, ich konnte ein wenig weiter helfen und einen Denkanstoß geben.

    Sonnige Grüße aus Ellhofen
    Helmut Weber

    --
    -------------------------------------------
    Mode ist eine Variable, Stil eine Konstante
    1. Ich hoffe, ich konnte ein wenig weiter helfen und einen Denkanstoß geben.

      Das wird funktionieren, es umschifft aber nur die Ursache des Problems des OP.

      1. Hallo suit,

        Das wird funktionieren, es umschifft aber nur die Ursache des Problems des OP.

        Ich glaube, es ist hier auch eleganter das Problem seines Lösungsansatzes zu umschiffen, als mit voller Kraft in's verderben zu segeln ;-)

        Sonnige Grüße aus Ellhofen
        Helmut Weber

        --
        -------------------------------------------
        Mode ist eine Variable, Stil eine Konstante
        1. Ich glaube, es ist hier auch eleganter das Problem seines Lösungsansatzes zu umschiffen, als mit voller Kraft in's verderben zu segeln ;-)

          Es ist eine Herangehenssache ob man nun eine Klasse durch eine andere Ersetzt oder eine weitere bei Bedarf ergänzt.

          Spätestens wenn er mal die Klasse "error" gegen "success" ersetzt, steht er vor demselben Problem und weiß nicht warum.

          Ich finde jedenfalls am Löungsansatz des OP nichts verkehrtes, auch wenn ich ebenfalls in diesem Fall eine Klasse hinzugefügt hätte. Dennoch hätte ich die Verzweigung eingespart und trotzdem mit live() gearbeitet.

          1. ich dank euch beiden .. die hasclass methode fkt na klar,aber suit hatte auch recht,hab im jquerysumpf die event shorts zunaiv benutzt bisher

            Spätestens wenn er mal die Klasse "error" gegen "success" ersetzt, steht er vor demselben Problem und weiß nicht warum.
            dass weiss er wohl :-)

            danke nochmal

  2. wie muss ich das verschachteln, [...] damit das hinhaut?

    Das hat nichts mit "Verschachtelung" zu tun - mach dich einfach kundig, was der Unterschied zwischen ".bind()" und ".live()" ist - und .click(function () {}) ist nichts anderes als ein alias auf .bind('click', function () {})