Ajax calls within the changing Div

Question

I am working on my first Ajax Project and I cannot find a solution for this problem:

This is my Ajax Code:

$(document).ready(function(){

    var seite = $('div.ipadSeite');

    $('a').on('click', function(e){
        var href = $(this).attr('href');

        seite.load( href );
        e.preventDefault(); 
    });
});

And this is the index.php:

....<div id="ipadHeader">
        <nav>
            <ul>
                <li>100% |=|</li>
                <li>
                    <?php 
                        echo date("h:i a");
                    ?> 
                </li>
                <li>TWT</li>
            </ul>
        </nav>
    </div>
    <div class="ipadSeite">
        <img src="../images/homescreen.png" id="homescreenImage" />
        <a href="seiten/1app.php"><div id="appIcon"><p>TWT</p></div></a>
    </div>
</div>....

When first starting the Application the Link: a href="seiten/1app.php is working! So I created an Home Button to go Back to the index.php. This is the File which is loaded through Ajax to go back "home":

    <img src="../images/homescreen.png" id="homescreenImage" />
<a href="informationen.php"><div id="appIcon"><p>TWT</p></div></a>

It simply loads the same content in "ipadSeite". My first Question: This is wrong right? It should be easier? But when linking to index.php it loads the whole site (header, footer ..) and the functionality breaks.

Second Question: My Solution works, but when I click on the button another time, it doesn't make an Ajax Request. Instead it opens a regular link but without CSS. I really cannot find any solution for that. I hope you guys understand my problem and my explanation.

Thank you very much!

Answer 1

Delegate function:

$(document).delegate('a','click',function(){//Write your function here})

'On' I find very situational. 'Delegate' and 'live' both work well with asynchronously load elements.

Robert