jQuery Mobile中的HTML代码兼容性

Question

The below html code displays a basic sign up/login form for the user, I want to use it within a page that is built using the jquery mobile library.

At the moment its not working, I'm new to jquery mobile and not sure if I'm breaking a fundamental law and cannot simply drop this into the page and expect it to work.

I'm thinking I may need to change the code for the buttons to make them work correctly?

I have researched this, but cannot find a 100% answer to the question I'm asking.

<script type="text/template" id="login-template">
  <header id="header"></header>
  <div class="login">
    <form class="login-form">
      <h2>Log In</h2>
      <div class="error" style="display:none"></div>
      <input type="text" id="login-username" placeholder="Username" />
      <input type="password" id="login-password" placeholder="Password" />
      <button>Log In</button>
    </form>

    <form class="signup-form">
      <h2>Sign Up</h2>
      <div class="error" style="display:none"></div>
      <input type="text" id="signup-username" placeholder="Username" />
      <input type="password" id="signup-password" placeholder="Create a Password" />
      <button>Sign Up</button>
    </form>
  </div>
</script>

Answer 1

Why is your HTML content within the <script></script> tags? I'm not familiar with the jQuery Mobile module, however, basic HTML would say this wouldn't work anyway.

Try removing said tags to see if it works then. I'm not actually sure what you're trying to achieve, so, I can't really contribute a great deal.