AJAX 加载后 jQuery 事件未触发。需要点击两次才能触发事件答案

【问题标题】：jQuery event not firing after AJAX load. Need to click twice before event is triggeredAJAX 加载后 jQuery 事件未触发。需要点击两次才能触发事件
【发布时间】：2020-03-30 02:17:56
【问题描述】：

我有一个页面，它有一个父窗体和子窗体。

父表单的javascript部分：

<script type="text/javascript">
    $(document).ready(function () {
        $('#btnAdd').click(function () {
            var mymodal = $('#attnModal');
            mymodal.find('.modal-title').text("Add Attendance")
            mymodal.find('.modal-body').load('@(Url.Action("NewAttendance", "Attendance"))?sessionN=' + '@Model.Session_N');
        });
    }
</script>

它有一个按钮，叫做Add Attendance

<button id="btnAdd" type="button" class="btn btn-default" title="Add Attendance" data-toggle="modal" data-target="#attnModal" data-backdrop="false">
    <span class="glyphicon glyphicon-plus"></span>
</button>

点击时会出现如下对话框

<div class="modal fade" id="attnModal" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content" style="max-width:500px;">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Attendance</h4>
            </div>
            <div class="modal-body">

            </div>
            <div class="modal-footer">
                @*<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>*@
            </div>
        </div>

    </div>
</div>

modal-body 内部有一个子窗体。在这个表单中，有一个按钮 AddAttendance，它是一个 ajax 调用。以下是javascript函数。

$('#btnAddAttendance').click(function (e) {
    e.preventDefault();
    ...
    $.ajax({
        ...
        success: function (data) {
            if (!data.Status) {
                OpenAlertPopup("User", "The user id is not valid.")
                return false;
            }
            else {
                $.ajax({
                    ...
                    success: function (res) {
                        if (res.Status) {
                            $('#attnModal').modal().hide();
                            $('#btnReload').click();
                        }
                        else {
                            OpenAlertPopup("Attendance", res.ErrorMessage);
                            $('#attnModal').modal().hide();
                        }
                    },
                    error: function (request, status, error) {
                        alert(error);
                        console.log("ajax call went wrong:" + request.responseText);
                    }
                });
            }
        }
    });
});

这是子窗体。

@using (Html.BeginForm("Add", "Attendance", FormMethod.Post, new { id = "frmAdd" }))
{
    @Html.AntiForgeryToken()
    <div class="form-horizontal">
        ...
        <div class="form-group">
            ...
            <div class="col-md-5">
                <input type="button" value="Add" class="btn btn-primary" id="btnAddAttendance"/>
            </div>
        </div>
    </div>
}

以下是顺序：

点击btnAdd，会出现attnModal对话框。
输入数据，点击btnAddAttendance
系统将关闭attnModal，添加数据，重新加载考勤列表。
我再次单击btnAdd，但这一次，attnModal 没有出现。没有记录控制台错误。如果我再次单击btnAdd，则会出现attnModal 对话框。

如何解决这个问题，让我不必点击两次btnAdd？

【问题讨论】：

请只为您的问题添加相关标签。
删除 e.preventDefault() 函数。您可以改用局部视图。
@RohanRao 它不起作用。

标签： jquery ajax asp.net-mvc

【解决方案1】：

我通过执行以下操作进行了修复：

在按钮中添加data-dismiss="modal"进行添加：

<div class="col-md-5">
    <input type="button" value="Add" class="btn btn-primary"  data-dismiss="modal" id="btnAddAttendance"/>
</div>

同时删除$('#attnModal').modal().hide();:

if (res.Status) {
    //$('#attnModal').modal().hide();
    $('#btnReload').click();
}
else {
    OpenAlertPopup("Attendance", res.ErrorMessage);
    //$('#attnModal').modal().hide();
}

【讨论】：