title: JQuery button click event doesn't respond as expected using asp.net mvc
body: <p>Please see my <code>_Layout.cshtml</code> code</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("~/bundles/modernizr")
  
  
      &lt;/head&gt;
      &lt;body&gt;
          &lt;header&gt;
              &lt;div class="content-wrapper"&gt;
                  &lt;div class="float-left"&gt;
                      &lt;p class="site-title"&gt;@Html.ActionLink("your logo here", "Index", "Home")&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div class="float-right"&gt;
                      &lt;section id="login"&gt;
                          @Html.Partial("_LoginPartial")
                      &lt;/section&gt;
                      &lt;nav&gt;
                          &lt;ul id="menu"&gt;
                              &lt;li&gt;@Html.ActionLink("Home", "Index", "Home")&lt;/li&gt;
                              &lt;li&gt;@Html.ActionLink("About", "About", "Home")&lt;/li&gt;
                              &lt;li&gt;@Html.ActionLink("Contact", "Contact", "Home")&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/nav&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/header&gt;
          &lt;div id="body"&gt;
              @RenderSection("featured", required: false)
              &lt;section class="content-wrapper main-content clear-fix"&gt;
                  @RenderBody()
              &lt;/section&gt;
          &lt;/div&gt;
          &lt;footer&gt;
              &lt;div class="content-wrapper"&gt;
                  &lt;div class="float-left"&gt;
                      &lt;p&gt;&amp;copy; @DateTime.Now.Year - My ASP.NET MVC Application&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/footer&gt;
  
          @Scripts.Render("~/bundles/jquery")
          @Scripts.Render("~/bundles/jqueryui")
          @Styles.Render("~/Content/themes/base/css")
          @RenderSection("scripts", required: false)
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I check firebug net tab and saw all js file got downloaded at client pc but still jquery related no function is working.</p>
  
  <p>This is first one which show alert just clicking on button which is not working</p>
  
  <pre><code>$(function () {
          $("#submit1").click(function () {
              alert("button");
          });
  
           $(".datePicker").datepicker({
              showOn: "button",
              buttonImage: "/images/calendar-icon.png",
              buttonImageOnly: true,
              buttonText: "Select date"
           });
       });
  </code></pre>
  
  <p>when clicking on button then alert is not showing.</p>
  
  <p>date picker is not coming. </p>
  
  <p>where i made the mistake. please help me to sort out. am i missing any file to include? thanks</p>
  
  <h2>EDIT</h2>
  
  <p>my view.cshtml code as follow</p>
  
  <pre><code>@model MvcApplication1.Controllers.Employee
  
  
  &lt;div class="editor-label"&gt;
      @Html.LabelFor(model =&gt; model.Id)
  &lt;/div&gt;
  &lt;div class="editor-field"&gt;
      @Html.EditorFor(model =&gt; model.Id)
  &lt;/div&gt;
  
  &lt;div class="editor-label"&gt;
      @Html.LabelFor(model =&gt; model.Name)
  &lt;/div&gt;
  &lt;div class="editor-field"&gt;
      @Html.EditorFor(model =&gt; model.Name)
  &lt;/div&gt;
  
  
  &lt;div class="editor-label"&gt;
      @Html.LabelFor(model =&gt; model.Salary)
  &lt;/div&gt;
  &lt;div class="editor-field"&gt;
      @Html.EditorFor(model =&gt; model.Salary)
  &lt;/div&gt;
  
  &lt;div class="editor-label"&gt;
      @Html.LabelFor(model =&gt; model.IsMale)
  &lt;/div&gt;
  &lt;div class="editor-field"&gt;
      @Html.EditorFor(model =&gt; model.IsMale)
  &lt;/div&gt;
  
  &lt;div class="editor-label"&gt;
      @Html.LabelFor(model =&gt; model.JoinDate)
  &lt;/div&gt;
  &lt;div class="editor-field"&gt;
      @Html.EditorFor(model =&gt; model.JoinDate, new { @class = "datePicker" })
  &lt;/div&gt;
  
  &lt;script&gt;
       $(function () {
           $(".datePicker").datepicker({
              showOn: "button",
              buttonImage: "/images/calendar-icon.png",
              buttonImageOnly: true,
              buttonText: "Select date"
           });
       });
  
  &lt;/script&gt;
  </code></pre>