Ergebnis 1 bis 4 von 4

Thema: Button in Div laden

  1. #1
    Benutzer
    Registriert seit
    10.05.2012
    Beiträge
    36

    Button in Div laden

    hallo,
    das ist mein erster beitrag in diesem Forum und ich hoffe, dass ich hier eine lösung für mein problem finde.

    HTML-Code:
    <html>
        <head>
            <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
    		<script src="http://code.jquery.com/ui/1.8.20/jquery-ui.min.js" type="text/javascript"></script>
        	<script type="text/javascript">
        	    $(document).ready(function () {
        	        $("#Main").html($("#DIV1").html());
    
        	        $("#button1").click(function () {
        	            $("#Main").html($("#DIV2").html());
        	        });
    
        	        $("#button2").click(function () {
        	            $("#Main").html($("#DIV1").html());
        	        });
        	    });
            </script>
        </head>
        <body>
            <div id="Main">
            
            </div>
    
            <div id="DIV1" style="display: none">
                <p>Div1</p>
                <input type="button" id="button1" value="auf Seite 2"/>
            </div>
    
            <div id="DIV2" style="display: none">
                <p>Div2</p>
                <input type="button" id="button2" value="auf Seite 1"/>
            </div>
        </body>
    </html>
    ... das ist eine vereinfachte version von meinem fehler ...


    mein ziel ist es den Main DIV abwechselnt mit einen der beiden unteren DIVs zu füllen, aber

    sobald ich den anderen inhalt neu in den Main Div lade, wird der button nicht mehr erkannt, und ich kann nichts mehr machen

    was mache ich falsch? bzw wie könnte ich es sonst schreiben, dass ich den Main Div immer anders füllen kann (ohne das der ganze Code im script steht, es sollte schon möglichst viel im body stehen)


    hoffentlich kennt ihr euch da besser aus ^^ danke im voraus

  2. #2
    Erfahrener Benutzer
    Registriert seit
    01.10.2010
    Ort
    Ludwigshafen
    Beiträge
    713
    Das wird wohl damit zusammenhängen, dass du wie du bereits schreibst, die Elemente dynamisch nachlädst. Der Click-Handler reagiert aber nur auf Elemente, die nach Seitenaufruf fest im Markup vorhanden sind, und nicht dynamisch nachgeladen werden.

    Um mit jQuery auf dynamisch erstellte Elemente Event-Handler anwenden zu können, musst du dein Click-Event mit der jQuery.load-Funktion wrappen.

    Hier mal 2 Videos von devnull, die dir das Ganze noch sicher etwas näher bringen werden.
    http://www.screenr.com/LKPs
    http://www.screenr.com/6mPs
    We have a strategic plan ... it´s called "doing things"

  3. #3
    Benutzer
    Registriert seit
    10.05.2012
    Beiträge
    36
    ich werd mir das mal genauer ansehen, vielen dank für deine antwort

  4. #4
    Moderator
    Registriert seit
    04.05.2012
    Beiträge
    2.693
    http://api.jquery.com/on/

    PHP-Code:
    $("#button1").on('click', function () {
        $(
    "#Main").html($("#DIV2").html());
    });

    $(
    "#button2").on('click', function () {
        $(
    "#Main").html($("#DIV1").html());
    }); 

Stichworte

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •