Javascript & Modal. It won't trigger on the first time

问题

I have an Index page with a button that calls a partial view called _Create, shown as a modal.

In the Index view I have my JScript that populates a dropdownlist on the modal. This is the code:

@section scripts{
<script src="~/js/store-index.js" asp-append-version="true"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#modal-action-store').on('shown.bs.modal', function (e) {
            var test = "#StoreArea";
            if ($(test).val()) {

            } else {
                var items = "<option value='0'>Select</option>";
                $('#DistrictID').html(items);
            }
        });
    });
</script>

<script type="text/javascript">
    $('#modal-action-store').on('shown.bs.modal', function (e) {
        $('#DepartmentID').change(function () {
            var url = '@Url.Content("~/")' + "Stores/GetDistrict";
            var ddlsource = "#DepartmentID";
            $.getJSON(url, { DepartmentID: $(ddlsource).val() }, function (data) {
                var items = '';
                $("#DistrictID").empty();
                $.each(data, function (i, district) {
                    items += "<option value='" + district.value + "'>" + district.text + "</option>";
                });
                $('#DistrictID').html(items);
            });
        });
    });
</script>

}

Problem: The problem is that the first time I open the modal, the JS won't fire. I need to close the modal and open it again in order to trigger those JScripts and I'm not sure why. I tought using 'shown.bs.modal' would be enough to trigger them once the modal pops up.

Can anyone give me any feedback on this?

Thanks in advance

Update

This is the Index page which has declared the modal:

@model IEnumerable<Application.Models.Store>
@using Application.Models
@{
ViewData["Title"] = "Index";
}

<h2>Stores</h2>

<div class="top-buffer"></div>
<div class="panel panel-primary">
<div class="panel-heading panel-head">Stores</div>
<div class="panel-body">
    <div class="btn-group">
        <a id="createEditStoreModal" data-toggle="modal" asp-action="Create" data-target="#modal-action-store"
           class="btn btn-primary">
                <i class="glyphicon glyphicon-plus"></i>  Add Store
            </a>
    </div>
    <div class="top-buffer"></div>
</div>

And this is the PartialView _Create (modal) view:

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


<form asp-action="Create" role="form">

<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">District</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>
    <div class="form-group">
        <label asp-for="StoreChainID" class="col-md-2 control-label"></label>
        <div class="col-md-10">
            <select asp-for="StoreChainID" class="form-control" asp-items="ViewBag.ChainList"></select>
            <span asp-validation-for="StoreChainID" class="text-danger"></span>
        </div>
    </div>
    <div class="form-group">
        <label asp-for="StoreName" class="col-md-2 control-label"></label>
        <div class="col-md-10">
            <input asp-for="StoreName" class="form-control" />
            <span asp-validation-for="StoreName" class="text-danger"></span>
        </div>
    </div>
    <div class="form-group">
        <label asp-for="StoreAddress" class="col-md-2 control-label"></label>
        <div class="col-md-10">
            <input asp-for="StoreAddress" class="form-control" />
            <span asp-validation-for="StoreAddress" class="text-danger"></span>
        </div>
    </div>
    <div class="form-group">
        <label asp-for="StoreArea" class="col-md-2 control-label"></label>
        <div class="col-md-10">
            <input asp-for="StoreArea" class="form-control" />
            <span asp-validation-for="StoreArea" class="text-danger"></span>
        </div>
    </div>
    @await Html.PartialAsync("_ModalFooter", new ModalFooter { })
</div>

Hope this helps!

来源：https://stackoverflow.com/questions/45126066/javascript-modal-it-wont-trigger-on-the-first-time