Bootstrap Modal opening once on dblclick using jquery/Ajax but will not open again after closing

Question

I have a bootstrap grid in a partial view which is being rendered in my main view: Here is the code:

<div class="study-container">
<div class="row no-gutters study-grid-header">
    <div class="col-3 header-icon-hover header-icon-ws" id="col0" onclick="sortTable(0)">&nbsp;Study Name</div>
    <div class="col-1 header-icon-hover d-flex justify-content-center" id="col1" onclick="sortTable(1)">Count</div>
    <div class="col-1" id="col2" onclick="sortTable(0)">Type</div>
    <div class="col-3 d-flex justify-content-left" id="col3" onclick="sortTable(1)" style="font-weight:normal">Comment</div>
    <div class="col-2 d-flex justify-content-center" id="col4" onclick="sortTable(0)">Start Date</div>
    <div class="col-2 d-flex justify-content-center" id="col5" onclick="sortTable(0)">End Date</div>


</div>
<div class="rows-container">

@foreach (var item in Model)
    {
        <div class="row study-grid-row jsTableRow" id="@item.Id" ondblclick="openEditStudyModal(@item.Id)">
        <div class="col-3">&nbsp;@item.Name</div>
        <div class="col-1 d-flex justify-content-center">@item.SubjectCount</div>
        <div class="col-1">@item.StudyTypeID</div>
        <div class="col-3">@item.Comment</div>
        <div class="col-2 d-flex justify-content-center">@item.StartUtc.ToString("yyyy-mm-dd")</div>
        <div class="col-2 d-flex justify-content-center">@item.EndUtc.ToString("yyyy-mm-dd")</div>
        

    </div>
    }
</div>

I have an edit modal which should open (and does the first time but only the first time) when I double click on a row. The JQuery/AJAX code is as follows:

$(document).ready(function () {
        $('#editStudyModal').on('hidden.bs.modal', function () {
            $(this).removeData('bs.modal');
            $('#editStudyModal .modal-body').html('');
        });

        function openEditStudyModal(id) {
            var id = $(this).attr('id');
            var url = '@Url.Action("Details","Studies")';
            $.ajax({
                url: url,
                type: 'post',
                data: { "id": id },
                success: function (data) {
                    $('#editStudyPopup').html(data);
                    $('#editStudyModal').modal("show");
                }
            });
        });
    });

The Modal opens once but the only way I can get it to open again after it is closed is to reload the page. Has anyone got any clues as to what the problem might be?

Answer 1

The issue seemed to be related to the table being a partial view so I moved the html into the main view and that solved the problem.