如何从模态窗口中进行javascript工作中的onchange事件

Question

在我的Asp.net MVC项目中，一个视图索引包含一个块，在该窗口中打开PartialViews Edit Details和Delete in Modal窗口。一切正常，但是我的“PersonNature”组合框的事件出现了问题，而这个事件并不适用于Change事件。

组合框PersonNature位于PartialView _Person中，并在PartialView Create中呈现。当我选择PersonNature时，在组合框中，在论文中，必须为Action提供一个POST以更改某些数据并再次返回到Modal形式的PartialView Create，但这不会发生。事件变化没有响应...... 我的活动出了什么问题？

$(document).ready(function () {
    $.ajaxSetup({ cache: false });
    $('a[data-modal]').on('click', function (e) {       
        openmodal(this.href);
        return false;
    });
    $('#modalPessoa').on('hidden.bs.modal', function () {
        $('#contentModal').html('');
    }); 
	$('#PessoaNatureza').change(function () {
            openmodal(this.href);
            return false;
    });	
           
});
function openmodal(url) {
    $('#contentModal').load(url, function () {
        $('#modalPessoa').modal({
            keyboard: true
        }, 'show'); 
        //$("#PessoaNatureza").change(function () {
        //   document.getElementById('frmCreate').submit();
        //});        

        bindForm(this);
    });
}
function bindForm(dialog) {
    $('form', dialog).submit(function () {
        if ($(this).valid()) {
            $.ajax({
                url: this.action,
                type: this.method,
                data: $(this).serialize(),
                success: function (result) {
                    if (result.success) {
                        window.location = window.location;
                        window.location.reload();

                    } else {
                        $('#contentModal').html(result);
                        bindForm();
                    }
                }
            });
            return false;
        } else {
            return false;
        }
    });
}

@using SistemaComercial.Domain.ValueObjects
@model SistemaComercial.Application.ViewModels.Pessoa.PessoaViewModel
@{
    ViewData["Title"] = "Cadastrar Nova Pessoa";
}

<div>
    <form asp-action="Create" asp-controller="Pessoa" id="frmCreate">
        @Html.AntiForgeryToken()
        <div class="modal-shadow">
            <div class="modal-header modal-header-primary">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title text-center"> @ViewData["Title"] </h4>
            </div>
            <div class="form-horizontal">
                <div id="validationSummary" class="text-center">
                    <vc:summary />
                </div>
                <div class="panel-body">
                            <div class="tab-pane active" id="exampleTabsOne" role="tabpanel">
                                <div class="form-horizontal">

                                    <div class="form-group row">
										<label  asp-for="PessoaNatureza" class="col-md-2 control-label"></label>
										<div class="col-md-3">
											<select asp-for="PessoaNatureza" asp-items="Model.PessoasNaturezas" data-plugin="selectpicker" title="Selecione uma opção" class="form-control show-tick show-menu-arrow"></select>
											<span asp-validation-for="PessoaNatureza" class="text-danger"></span>
										</div>									   
									</div>

                                    @if (Model.PessoaNatureza == PessoaNatureza.Fisica)
                                    {
                                        @*<div id="divPessoaJuridica">
                                                @await Html.PartialAsync("_PessoaJuridica")
                                            </div>*@
                                        <div id="divPessoaFisica">
                                            @await Html.PartialAsync("_PessoaFisica")
                                        </div>
                                    }
                                    else if (Model.PessoaNatureza == PessoaNatureza.Juridica)
                                    {
                                        @*<div id="divPessoaFisica" style="display:none">
                                                @await Html.PartialAsync("_PessoaFisica")
                                            </div>*@
                                        <div id="divPessoaJuridica">
                                            @await Html.PartialAsync("_PessoaJuridica")
                                        </div>
                                    }

                                </div>
                           
                    </div>

                    @*<div class="form-group">
                            <div class="col-md-offset-2 col-md-10">
                                <button type="submit" class="btn btn-success"><i class="icon wb-check" aria-hidden="true"></i> Gravar</button>
                                <a asp-action="Index" class="btn btn-danger">
                                    <span title="Retornar à Lista" class="icon wb-arrow-left"></span> Retornar à lista
                                </a>
                            </div>
                        </div>*@

                    <div class="modal-footer">
                        <button id="btnSalvar" type="submit" class="btn btn-primary"><i class="icon wb-check"></i> Salvar </button>
                        <a class="btn btn-danger" data-dismiss="modal">
                            <span title="Fechar" class="icon wb-close"></span> Fechar
                        </a>
                    </div>

                </div>
            </div>
        </div>
    </form>
</div>

我的模态块（索引）

<div class="modal fade modal-primary" id="modalPessoa" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog" style="width: 65%; height: auto;">
        <div class="modal-content ">
            <div id="contentModal"></div>
        </div>
    </div>
</div>

我的PartialView _Pessoa：

@model SistemaComercial.Application.ViewModels.Pessoa.PessoaViewModel
@{
    ViewData["Title"] = "Pessoa";
}

<div class="form-horizontal">
    <div class="form-group">
        <label asp-for="Id" class="col-md-2 control-label"></label>
        <div class="col-md-2">
            <input asp-for="Id" class="form-control" disabled />
            <span asp-validation-for="Id" class="text-danger"></span>
        </div>
        @*<a class="btn btn-primary" id="examplePopWithTable" href="javascript:void(0)" data-title="Códigos de Pessoa">Códigos</a>
        <div class="hidden" id="examplePopoverTable" >
            <table class="table">
                <thead>
                    <tr>
                        <th>@Html.DisplayNameFor(model => model.PessoaEntidadeViewModel.Id)</th>
                        <th>@Html.DisplayNameFor(model => model.PessoaEntidadeViewModel.PessoaTipo)</th>
                        <th>@Html.DisplayNameFor(model => model.PessoaEntidadeViewModel.PessoaFilial)</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (var item in Model.PessoasEntidades)
                    {
                        <tr>
                            <td>
                                @Html.DisplayFor(modelItem => item.Pessoa.Id)
                            </td>
                            <td>
                                @Html.DisplayFor(modelItem => item.PessoaTipo)
                            </td>
                            <td>
                                @Html.DisplayFor(modelItem => item.PessoaFilialId)
                            </td>


                        </tr>
                    }
                </tbody>
            </table>
        </div>*@

    </div>
    <div class="form-group row">
        <label  asp-for="PessoaNatureza" class="col-md-2 control-label"></label>
        <div class="col-md-3">
            <select id="PessoaNatureza" asp-for="PessoaNatureza" asp-items="Model.PessoasNaturezas" data-plugin="selectpicker" title="Selecione uma opção" class="form-control show-tick show-menu-arrow"></select>
            <span asp-validation-for="PessoaNatureza" class="text-danger"></span>
        </div>
        @*<label asp-for="PessoaEntidadeViewModel.PessoaFilialId" class="col-md-2 control-label"></label>
            <div class="col-md-3">
                <select asp-for="PessoaEntidadeViewModel.PessoaFilialId" asp-items="Model.PessoaEntidadeViewModel.Filiais" data-plugin="selectpicker" title="Selecione uma opção" class="show-tick show-menu-arrow"></select>
                <span asp-validation-for="PessoaEntidadeViewModel.PessoaFilialId" class="text-danger"></span>
            </div>*@
    </div>
</div>


@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}

Answer 1

虽然你没有提供足够的代码来使用，但我认为你的dropdown元素正在失去它的绑定

尝试更改此

$('#PessoaNatureza').change(function () {
        openmodal(this.href);
        return false;
    }); 

到此

$('.modal-primary').on('change', '#PessoaNatureza', function() {
  openmodal(this.href);
            return false;
});

当模态打开时，应该保留绑定，并在其中创建html。 $('.modal-primary')作为您在模态

中的图像上找到的更改事件的基础