jQuery: Result of script gets deleted after execution - removeData() running on the background?

问题

I have a modal window used to update or add a new object Store.

This modal has a cascading dropdownlist for two properties: Department and District.

How should it work:

We first identify if we are in the situation of creating or updating a Store.

In case is a new Store the modal opens and using jQuery we present a default value for the District dropdownlists (since no Department has been chosen yet).

    <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>

However, at this moment, after the default value is added, after a fraction of a second, the value gets deleted.

What I've tried

I've noticed that when I remove this line of code:

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

From the previous script, it works ok, but I need that code in order to clear the data from the modal if I need to use the modal to edit another Store.

Plus, when I debug the project the debugger did not stop at the breakpoint of that line, so I'm not sure why it's somehow executing in the background? Is it because it's wrapped inside the function document.ready()?

I've been struggling with this for days. I thank for any helpful comment.

Aditional info:

Online version of the project:

There is an online version for this for debugging:

http://plataformafantasypark.azurewebsites.net/

user: adelgado password: $Adelgado33

Under the menu 'Tiendas' -> 'Registro'

Button that calls the modal:

<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>

The Modal:

@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:

Why not do something like(?):

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

       wasclicked = 1;
 });

回答2:

The idea is to take manual control of the loading and inserting of the remote content received from /Stores/Create. I'm not set up to test this but give it a try.

You will need to get rid of/comment out the existing .on('showN.bs.modal') handler, and you might have to get rid of the href on the <a> tag that invokes the modal, not sure.

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

来源：https://stackoverflow.com/questions/47682773/jquery-result-of-script-gets-deleted-after-execution-removedata-running-on