Ajax表单在第一次提交事件后没有提交，也没有重新呈现部分视图

Question

我有一个包含4个下拉列表的搜索表单。每次用户更改值时，表单都会提交，并在部分视图中显示新结果。这是代码：

<script type="text/javascript">

   $(document).ready(function () {
        $("#DDLUF").change(function (event) {
            $("#loading").show();
            $("#DDLCidade").empty();
            $("#DDLBairro").empty();
            $("#DDLRua").empty();

            if ($("#DDLUF").val() !== '') {
                $.ajax({
                    type: 'POST',
                    url: '/CoberturaPainelRotas/ObterCidadesPorUf',
                    dataType: 'json',
                    data: { uf: $("#DDLUF").val() },

                    success: function (Ddd) {
                        $("#DDLCidade").append("<option value''>SELECIONE</option>");
                        $.each(Ddd, function (i, Cidade) {
                            $("#DDLCidade").append('<option value="' + Cidade.Id + '">' + Cidade.Nome + '</option>');
                        });
                        var form = $(event.target).parents('form');
                        form.submit();
                        $("#DDLCidade").prop('disabled', false);
                        $('#loading').hide();

                    }
                });


            } else {
                $('#loading').hide();
                $("#DDLCidade").prop('disabled', true);
                $("#DDLBairro").prop('disabled', true);
                $("#DDLRua").prop('disabled', true);
                $("#totalUf").text("");
                $("#totalCidade").text("");
            }

        });

        $("#DDLCidade").change(function () {
            $("#loading").show();
            $("#DDLBairro").empty();
            $("#DDLRua").empty();

            if ($("#DDLCidade").val() !== 'SELECIONE') {
                $.ajax({
                    type: 'POST',
                    url: '/CoberturaPainelRotas/ObterBairrosPorCidade',
                    dataType: 'json',
                    data: { cidade: $("#DDLCidade").val() },

                    success: function (Ddd) {
                        $("#DDLBairro").append("<option value''>SELECIONE</option>");
                        $.each(Ddd, function (i, Bairro) {
                            $("#DDLBairro").append('<option value="' + Bairro.Id + '">' + Bairro.Nome + '</option>');
                        });
                        var form = $(event.target).parents('form');
                        form.submit();
                        $("#DDLBairro").prop('disabled', false);
                        $('#loading').hide();
                    }
                });

            } else {
                $('#loading').hide();
                $("#DDLBairro").prop('disabled', true);
                $("#DDLRua").prop('disabled', true);
                $("#totalCidade").text("");
            }

        });

        $("#DDLBairro").change(function () {
            $("#loading").show();
            $("#DDLRua").empty();

            if ($("#DDLRua").val() !== 'SELECIONE') {
                $.ajax({
                    type: 'POST',
                    url: '/CoberturaPainelRotas/ObterRuasPorBairro',
                    dataType: 'json',
                    data: { bairro: $("#DDLBairro").val() },

                    success: function (Ddd) {
                        $("#DDLRua").append("<option value''>SELECIONE</option>");
                        $.each(Ddd, function (i, Rua) {
                            $("#DDLRua").append('<option value="">' + Rua.NomeRua + '</option>');
                        });
                        var form = $(event.target).parents('form');
                        form.submit();
                        $("#DDLRua").prop('disabled', false);
                        $('#loading').hide();
                    }
                });
            } else {
                $('#loading').hide();
                $("#DDLRua").prop('disabled', true);
            }

        });



    });
</script>

<div class="panel-body">
    <div class="row">
        <div class="col-lg 12">
            <h3 class="page-header">Consultar Cobertura</h3>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-12">
            <div class="form-group">
                @using (Ajax.BeginForm("ConsultarCapacidadeSecundaria", "CoberturaPainelRotas", new AjaxOptions { HttpMethod = "Post", UpdateTargetId = "PartialConsultarCobertura" }, new { @id = "formID" }))
                {
                    <div class="row">
                        <div class="col-sm-2">
                            <label>Uf:</label>
                            @Html.DropDownListFor(x => x.UF , new SelectList((IEnumerable)ViewData["UF"]), "SELECIONE", new { @id = "DDLUF", @class = "form-control" })
                        </div>
                        <div class="col-sm-4">
                            <label id="totalUf"></label>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-4">
                            <label>Cidade:</label>
                            @Html.DropDownListFor(x => x.Cidade, new SelectList(string.Empty), new { @id = "DDLCidade", @class = "form-control", @disabled = "true" })
                        </div>
                        <div class="col-sm-4">
                            <label id="totalCidade"></label>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-4">
                            <label>Bairro:</label>
                            @Html.DropDownListFor(x => x.Bairro, new SelectList(string.Empty), new { @id = "DDLBairro", @class = "form-control", @disabled = "true" })
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-4">
                            <label>Rua:</label>
                            @Html.DropDownListFor(x => x.Rua, new SelectList(string.Empty), new { @id = "DDLRua", @class = "form-control", @disabled = "true" })
                        </div>
                    </div>
                }


            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <div id="PartialConsultarCobertura">
                @{
                    Html.RenderPartial("PartialConsultaCobertura");
                }
            </div>
        </div>
    </div>
</div>

当用户更改第一个下拉列表时，会提交ajax表单并显示结果。但是，当用户更改以下下拉列表中的选定项目时，表单不会提交。难道我需要每次重新附加jquery事件吗？我做错了什么？

（ASP.MVC 5 BTW）

Answer 1

我设法让它发挥作用：

1）在更改事件中添加了“事件”：

$("#DDLCidade").change(function (event) {}

2）删除了Ajax开始表单：

<div class="panel-body">
    <div class="row">
        <div class="col-lg 12">
            <h3 class="page-header">Consultar Cobertura</h3>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-12">
            <div class="form-group">

                    <div class="row">
                        <div class="col-sm-2">
                            <label>Uf:</label>
                            @Html.DropDownListFor(x => x.UF , new SelectList((IEnumerable)ViewData["UF"]), "SELECIONE", new { @id = "DDLUF", @class = "form-control" })
                        </div>
                        <div class="col-sm-4">
                            <label id="totalUf"></label>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-4">
                            <label>Cidade:</label>
                            @Html.DropDownListFor(x => x.Cidade, new SelectList(string.Empty), new { @id = "DDLCidade", @class = "form-control", @disabled = "true" })
                        </div>
                        <div class="col-sm-4">
                            <label id="totalCidade"></label>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-4">
                            <label>Bairro:</label>
                            @Html.DropDownListFor(x => x.Bairro, new SelectList(string.Empty), new { @id = "DDLBairro", @class = "form-control", @disabled = "true" })
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-4">
                            <label>Rua:</label>
                            @Html.DropDownListFor(x => x.Rua, new SelectList(string.Empty), new { @id = "DDLRua", @class = "form-control", @disabled = "true" })
                        </div>
                    </div>



            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <div id="PartialConsultarCobertura">
                @{
                    Html.RenderPartial("PartialConsultaCobertura");
                }
            </div>
        </div>
    </div>
</div>

3）使用另一个ajax调用来填充我的局部视图：

$.ajax({
     type: 'GET',
     url: '/CoberturaPainelRotas/ConsultarCapacidadeSecundaria',
     data: { uf: $("#DDLUF").val(), cidade: $("#DDLCidade").val(), bairro: $("#DDLBairro").val(), rua: $("#DDLRua").val() },
     success: function (viewHTML) {
            $("#PartialConsultarCobertura").html(viewHTML);
     }
});

Answer 2

尝试替换此$("#DDLUF").change(function (event)

到此$(document).on('change', '#DDLUF', function (e)

和剩余的下拉列表相同

这是ajax刷新的一个常见问题，因为它会动态创建新内容并且刷新时会丢失事件

如果仍然无法正常工作，则需要更改此var form = $(event.target).parents('form');

并尝试对其进行硬编码，如var form = $(event.target).parent().parent().parent().childern(...;