JQuery: результат script удаляется после выполнения - removeData() работает на фоне?

У меня есть модальное окно, используемое для обновления или добавления нового объекта Store.

Этот модальный имеет каскадный выпадающий список для двух свойств: Department и District.

Как это работает:

Сначала мы определяем, находимся ли мы в ситуации создания или обновления Store.

В случае нового Store модальный открывается и с помощью jQuery мы представляем значение по умолчанию для dropdownlists District (так как no Department еще не выбрано).

    <script type="text/javascript">

        var wasclicked = 0;
        var $this = this;

        $(document).ready(function () {

            document.getElementById("modalbutton").onclick = function () {
                //is AddNew Store button is hitted, this var = 1
                wasclicked = 1;
            };

            $('#modal-action-store').on('hidden.bs.modal', function () {
                //global.wasclicked = 0;
                wasclicked = 0;
                $(this).removeData('bs.modal');
            });

            $('#modal-action-store').on('shown.bs.modal', function (e) {
                console.log($('#DistrictID').length);
                //if wasclicked equals 1 that means we are in the AddNew Store scenario.
                if (wasclicked == 1) {
                    //a default value is sent to District dropdownlist
                    var items = "<option value='0'>-- Seleccione Distrito --</option>";
                    $('#DistrictID').html(items);
                };


            });
        });

</script>

Однако в этот момент после добавления значения по умолчанию через долю секунды значение будет удалено.

Что я пробовал

Я заметил, что когда я удаляю эту строку кода:

$(this).removeData('bs.modal');

Из предыдущего script он работает нормально, но мне нужен этот код, чтобы очистить данные от модального, если мне нужно использовать modal для редактирования другого Store.

Плюс, когда я отлаживаю проект, отладчик не останавливался на точке останова этой строки, поэтому я не уверен, почему это как-то выполняется в фоновом режиме? Это потому, что он завернут внутри функции document.ready()?

Я боролся с этим в течение нескольких дней. Я благодарю за любой полезный комментарий.

Дополнительная информация:

Онлайн-версия проекта:

Для отладки есть онлайн-версия:

http://plataformafantasypark.azurewebsites.net/

пользователь: adelgado пароль: $Adelgado33

В меню "Tiendas" → "Registro"

Кнопка, вызывающая модальную:

<div class="btn-group" id="modalbutton">
    <a id="createEditStoreModal" data-toggle="modal" asp-action="Create" 
         data-target="#modal-action-store" class="btn btn-primary">
            <i class="glyphicon glyphicon-plus"></i>  NEW STORE
        </a>
</div>

Модаль:

@model Application.Models.ApplicationviewModels.StoreIndexData
@using Application.Models

<form asp-action="Create" role="form">    
        @await Html.PartialAsync("_ModalHeader", new ModalHeader
    { Heading = String.Format("Actualización de Modelo: Tiendas") })

        <div asp-validation-summary="ModelOnly" class="text-danger"></div>
        <div class="modal-body form-horizontal">
            <div class="form-group">
                <label asp-for="DepartmentID" class="col-md-2 control-label"></label>
                <div class="col-md-10">
                    <select asp-for="DepartmentID" class="form-control"
                            asp-items="@(new SelectList(@ViewBag.ListofDepartment,"DepartmentID","DepartmentName"))"></select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-md-2 control-label">Distrito</label>
                <div class="col-md-10">
                    <select class="form-control" id="DistrictID" name="DistrictID" asp-for="DistrictID"
                            asp-items="@(new SelectList(@ViewBag.ListofDistrict,"DistrictID","DistrictName"))"></select>
                </div>
            </div>
            {... more elements}
       </div>
</form>

Ответ 1

Почему бы не сделать что-то вроде (?):

$("#modalbutton").on('click', function () {
       //is AddNew Store button is hitted, this var = 1

       wasclicked = 1;
 });

Ответ 2

Идея состоит в том, чтобы вручную управлять загрузкой и вставкой удаленного контента, полученного из /Stores/Create. Я не настроен, чтобы проверить это, но попробуйте.

Вам нужно будет избавиться от существующего обработчика .on('showN.bs.modal')/comment, и вам может потребоваться избавиться от href в теге <a>, который вызывает модальный, не уверен.

$('#modal-action-store').on('show.bs.modal', function (e) {
    if (wasclicked == 1) {
        // load the form, once it done loading modify it as needed
        $('#modal-action-store').find('.modal-content').load('/Stores/Create', function () {
            $('#DistrictID').html('<option value='0'>-- Seleccione Distrito --</option>');
        });
    }
});