jQuery mobile next page doesn't work

Question

I am making a website with jQuery mobile but I have a problem.

My first page look like this:

<div id="page">
<div data-role="header" data-position="fixed">
    <a href="registreren.html">Registreren</a>
    <h1>Name</h1>
</div>

<div id="container">
    <form id="loginform" method="post">
        <input type="text" name="gebruikersnaam" placeholder="Gebruikersnaam">
        <input type="password" name="wachtwoord" placeholder="Wachtwoord">
        <input type="submit" data-theme="b" value="Inloggen">
    </form>
</div>

When I click in the header on the link I go to the page, no problem so far. But when I am on that page he doesn't do anything for example I have an alert on that page but he doesn't show it. When I go to registreren.html without the first page he shows the alert, what do I do wrong?

I hope someone can help me.

Answer 1

To understand this situation you need to understand how jQuery Mobile works. It uses ajax to load other pages.

First page is loaded normally. Its HEAD and BODY is loaded into the DOM, and they are there to await other content. When second page is loaded, only its BODY content is loaded into the DOM.

To find out more and how to solve this problem (with solutions and examples) take a look at my other answer: Why I have to put all the script to index.html in jquery mobile