Bootstrap collapse not working after lading partial view

I am using bootstrap v3 collapse to hide elements. It works fine (opens/closes as expected) until a partial view is loaded, then it will open / un-collapse, but not close / re-collapse.

There are no javascript exceptions.

What could cause this?

The collapse stops working after the html is loaded via the AJAX call in divForTable

html

<div class="container-fluid">  <a class="btn btn-primary btn-sm" role="button" data-toggle="collapse" href="#collapseFilters" aria-expanded="false" aria-controls="collapseFilters">     Show/Hide  </a>  <div class="collapse" id="collapseFilters">      <div class="row">          @using (Html.BeginForm("", "", FormMethod.Post, new { name = "formFilters", id = "formFilters" }))          {              @Html.AntiForgeryToken()                @Html.HiddenFor(m => m.ProjectModelId)                <div id="divForFilters">                  @*loaded with AJAX call*@              </div>          }      </div>  </div>    <div id="divForTable">      @*loaded with AJAX call*@  </div>  

javascript that loads the partial view

 $(document).on('click', '.updateTableButton', function () {      $(loadTable);  });      function loadTable() {      $('#divForTable').empty();      $('#loaderDiv').show();//Show loaderDiv while ajax runs        $.ajax({          type: "POST",          url: "@Url.Action("../Project/PartialQueries")",          data: $("#formFilters").serialize(), //Serializes the form's elements.          dataType: 'html', //receiving Razor PartialView back from server response          success: function (data) {                $('#divForTable').html(data);            },          error: function (xhr, ajaxOptions, thrownError) {          alert(xhr.status + " " + thrownError);          }      });  }  

partial view loaded with AJAX call above

<div class="row" id="">  <div class="col-md-12">      <div class="table">              <div class="table-responsive" id="table1div">                  <table class="table table-hover table-condensed tablesorter" id="table1">                      <thead>                          <tr>                              <th class="header">Item Type</th>                              <th class="header">Description</th>                              <th class="header">Status</th>                              <th class="header">Associated With</th>                              <th class="header">Assigned To</th>                              <th class="header">Last Edit</th>                              <th class="header">Last Edit By</th>                              <th class="header">Due Date</th>                          </tr>                      </thead>                      <tbody class="list">                          @foreach (var issue in Model.AllFilteredIssues)                          {                          <tr>                              <td class="status">                                  Issue                              </td>                              <td class="description">                                  <a href="@Url.Action("../Issue/Details", new { id = issue.Id })" target="_blank">                                      @issue.IssueIdentifier | @issue.IssueDescriptionTruncated                                      <span class="icon icon-popup"></span>                                  </a>                              </td>                              <td class="status">                                  <div class="@backgroundStyleRespondent img-rounded text-center">                                      @issueStatus                                  </div>                              </td>                              <td class="association">                                  @issue.SystemGroupName                              </td>                              <td class="assignedTo">                                  @issue.AssignedTo                              </td>                              <td class="lastEdit">                                  @Html.DisplayFor(x => issue.LastIssueEdit)                              </td>                              <td class="lastEditBy">                                  @issue.LastEditBy                              </td>                              <td class="date">                                  @Html.DisplayFor(x => issue.DueDateForDisplay)                              </td>                          </tr>                          }                      </tbody>                  </table>              </div>          </div>  </div>  

https://stackoverflow.com/questions/65571243/bootstrap-collapse-not-working-after-lading-partial-view January 05, 2021 at 07:29AM