title: JavaScript/jQuery in ASP .NET MVC layout page not working
body: <p>JavaScript is enabled in the Chrome browser. I want an alert to appear when a paragraph is clicked. WHY is it not working?!
  If I had got the JavaScript working I assume the jQuery would also work. </p>
  
  <p>Here is the _Layout.cshtml page:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;title&gt;@ViewBag.Title - My ASP.NET MVC Application&lt;/title&gt;
      &lt;link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" /&gt;
      &lt;meta name="viewport" content="width=device-width" /&gt;
      @Styles.Render("~/Content/css")
      @Scripts.Render("~/Scripts/jquery-1.7.1.js")
      @Scripts.Render("~/bundles/modernizr")
  
      &lt;script&gt;
          $(document).ready(
              $("#para").click(function() {
                  alert("you clicked the paragraph");
              })
          );
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;p id="para"&gt;Some paragraph&lt;/p&gt;
  
   @Scripts.Render("~/bundles/jquery")
   @RenderSection("scripts", required: false)
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>