title: ASP MVC jquery function not working in partial view but working in main view
body: <p>I have a main view with search criteria. Main view contains a partial view with an <code>html</code> table. The search results are loaded via <code>ajax</code>. </p>
  
  <p>Now i am trying to implement <code>edit</code>, <code>create</code> and <code>delete</code> via <code>bootstrap modal</code>. So in the <code>partial view</code> on table row button click event i added a function to open the modal like this</p>
  
  <pre><code>&lt;button class="btn btn-outline btn-primary" data-toggle="tooltip" title="Location Details" type="button" onclick="ShowModal();"&gt;
      &lt;i class="fa fa-fw fa-info"&gt;&lt;/i&gt;
  &lt;/button&gt;
  
  &lt;script type="text/javascript"&gt;
      function ShowModal() {
          $('#myModal').modal('show');
          //return false;
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>This function does not work if placed in the <code>partial view</code>. However, once i place the same function inside my <code>main view</code>, the modal opens properly.</p>
  
  <p><strong>Why does this happen?</strong></p>
  
  <p>The reason why i wanted to have the <code>script</code> inside my <code>partial view</code>, is because i wanted to keep my client side code together so it is easier to understand and maintain.</p>
  
  <p><strong>Edit</strong></p>
  
  <p>The following is my <code>main view</code> together with related <code>scripts</code>:</p>
  
  <pre><code>@model MVC_Replica.Models.LocationSearchViewModel
  
  @using (Html.BeginForm("index", "Locations", FormMethod.Get)){
  &lt;div id="page-wrapper"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-lg-12"&gt;
              &lt;div id=""&gt;
                  &lt;h1 class="page-header" id="lblDboard"&gt;Location List&lt;/h1&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
          &lt;div class="panel panel-primary"&gt;
              &lt;div class="panel-body"&gt;
                  &lt;div class="form-horizontal"&gt;
                      &lt;div class="form-group"&gt;
                          &lt;div class="col-md-3"&gt;
                              @Html.TextBoxFor(m =&gt; m.LocationSearch.LocationName, new { @class = "form-control", @placeholder = "Location Name", @name = "locationName" })
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="panel-footer clearfix"&gt;
                  &lt;input type="button" id="cmdSearch" class="btn btn-primary" value="Search" /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row" id="locationGrid"&gt;
          @Html.Partial("_LocationGrid")
      &lt;/div&gt;
  &lt;/div&gt;
  }
  </code></pre>
  
  <p>An the <code>scripts</code></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(function () {
          $('[data-toggle=tooltip]').tooltip();
          $('#cmdSearch').click(function () {
              var locationName = $('#LocationSearch_LocationName').val();
  
              $('#locationGrid').block({ message: '&lt;img src="../media/ajax-loading.gif"/&gt;' });
  
              setTimeout(SearchLocations, 2000);
  
              function SearchLocations() {
                  $.ajax({
                      url: "/Locations/SearchLocations",
                      type: "POST",
                      data: { 'locationName': locationName },
                      dataType: "html",
                      success: function (response) {
                          $('#locationGrid').empty();
                          $('#locationGrid').html(response);
  
                          $('[data-toggle=tooltip]').tooltip();
                      },
                      error: function (xmlHttpRequest, errorText, thrownError) {
                          alert(xmlHttpRequest + '|' + errorText + '|' + thrownError);
                      }
                  });
              }
          });
      });
  &lt;/script&gt;    &lt;!--Search Locations AJAX--&gt;
  </code></pre>
  
  <p><strong>Partial View HTML</strong></p>
  
  <pre><code>@model MVC_Replica.Models.LocationSearchViewModel
  @{
      IEnumerable&lt;MVC_Replica.Models.Location&gt; location = Model.LocationList;
      Layout = null;
  }
  &lt;div class="table-responsive"&gt;
      &lt;table class="table table-responsive table-condensed table-bordered table-striped"&gt;
          &lt;tr&gt;
              &lt;th&gt;
                  &lt;button class="btn btn-outline btn-success" data-toggle="tooltip" title="Create New Location" data-placement="bottom"
                          onclick="location.href='@Url.Action("Create", "Locations")';return false;"&gt;
                      &lt;i class="fa fa-fw fa-plus"&gt;&lt;/i&gt;&amp;nbsp; Create
                  &lt;/button&gt;
              &lt;/th&gt;
              &lt;th&gt;
                  Location Name
              &lt;/th&gt;
              &lt;th&gt;
                  Date Created
              &lt;/th&gt;
              &lt;th&gt;
                  Location State
              &lt;/th&gt;
  
          &lt;/tr&gt;
  
          @foreach (var item in location)
          {
              &lt;tr&gt;
                  &lt;td&gt;
                      &lt;button class="btn btn-outline btn-primary" data-toggle="tooltip" title="Edit Location"
                              onclick="location.href='@Url.Action("Edit", "Locations", new  { id=item.LocationId})';return false;"&gt;
                          &lt;i class="fa fa-fw fa-pencil"&gt;&lt;/i&gt;
                      &lt;/button&gt;
                      &lt;button class="btn btn-outline btn-primary" data-toggle="tooltip" title="Location Details" type="button"
                              onclick="ShowModal();"&gt;
                          &lt;i class="fa fa-fw fa-info"&gt;&lt;/i&gt;
                      &lt;/button&gt;
                      &lt;button class="btn btn-outline btn-danger" data-toggle="tooltip" title="Delete Location"
                              onclick="location.href='@Url.Action("Delete", "Locations", new  { id=item.LocationId})';return false;"&gt;
                          &lt;i class="fa fa-fw fa-remove"&gt;&lt;/i&gt;
                      &lt;/button&gt;
                  &lt;/td&gt;
                  &lt;td&gt;
                      @Html.DisplayFor(modelItem =&gt; item.LocationName)
                  &lt;/td&gt;
                  &lt;td&gt;
                      @Html.DisplayFor(modelItem =&gt; item.DateCreated)
                  &lt;/td&gt;
                  &lt;td&gt;
                      @Html.DisplayFor(modelItem =&gt; item.LocationState)
                  &lt;/td&gt;
              &lt;/tr&gt;
          }
  
      &lt;/table&gt;
  
  &lt;/div&gt;
  &lt;!-- Modal --&gt;
  &lt;div id="myModal" class="modal fade" role="dialog"&gt;
      &lt;div class="modal-dialog"&gt;
  
          &lt;!-- Modal content--&gt;
          &lt;div class="modal-content"&gt;
              &lt;div class="modal-header"&gt;
                  &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
                  &lt;h4 class="modal-title"&gt;Modal Header&lt;/h4&gt;
              &lt;/div&gt;
              &lt;div class="modal-body"&gt;
  
              &lt;/div&gt;
              &lt;div class="modal-footer"&gt;
                  &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>