Q:

JQuery does not work in ASP.Net MVC page

I m new to Asp.Net (MVC). I have created a ASP.Net MVC Mobile page. The page output looks as follows... The jQuery just does not fires on textchange of UserName textbox. Please let me know if I am missing something.
    <!DOCTYPE html>
<html lang="en" >
    <head><meta charset="utf-8" /><title>
    XYZ
</title><meta name="viewport" content="width=device-width" />
        <link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <link href="/Content/jquery.mobile-1.1.0.css" rel="stylesheet"/>
        <link href="/Content/jquery.mobile.structure-1.1.0.css" rel="stylesheet"/>
        <link href="/Content/jquery.mobile.theme-1.1.0.css" rel="stylesheet"/>
        <link href="/Content/site.css" rel="stylesheet"/>
        <script src="/Scripts/modernizr-2.5.3.js"></script>

  <script>
      $(document).ready(function () {
          $("#UserName").change(function () {
              alert("Text Entered Is :"+$("#UserName").val());
          });
      });
  </script>

</head>
    <body>
        <div data-role="page" data-theme="b">
            <div data-role="header">
                    <h1>Forgot Password?</h1>
                    <a data-icon="star" href="/Account/Login">Log in</a>
            </div>
            <div data-role="content">

<p>Specify your login name and answer the secret question. If user name and secret answer matches; new password will be mailed to your registered email id.</p>
<form action="/Account/ForgotPassword" method="post"><div class="validation-summary-valid" data-valmsg-summary="true"><ul><li style="display:none"></li>
</ul></div>
    <ul data-role="listview" data-inset="true">
        <li data-role="list-divider">Confirm...</li>

        <li data-role="fieldcontain">
            <label for="UserName">User name</label>
            <input data-val="true" data-val-required="The User name field is required." id="UserName" name="UserName" type="text" value="" />
        </li>

        <li data-role="fieldcontain">
            <label for="SecurityQuestion">Security Question</label>
            <input data-val="true" data-val-required="The Security Question field is required." id="SecurityQuestion" name="SecurityQuestion" readonly="readonly" type="text" value="" />
        </li>

        <li data-role="fieldcontain">
            <label for="SecurityAnswer">Security Answer</label>
            <input data-val="true" data-val-required="The Security Answer field is required." id="SecurityAnswer" name="SecurityAnswer" type="text" value="" />
        </li>

        <li data-role="fieldcontain">
            <input type="submit" value="Retrieve Password" />
        </li>
    </ul>
</form>
            </div>
        </div>

        <script src="/Scripts/jquery-1.7.1.js"></script>
<script src="/Scripts/jquery.mobile-1.1.0.js"></script>

    <script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>

    </body>
</html>

A:

Move this line to above the jquery function.
<script src="/Scripts/jquery-1.7.1.js"></script>

