Question

我有一个页面，其中有一个父表单和一个子表单。

父表单的javascript部分：

ape

它有一个名为hc <- hclust(dist(mtcars)) hc <- ape::as.phylo(hc) p <- ggtree(hc, linetype='dashed')

的按钮

<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>内有一个子表单。在这种形式中，有一个按钮AddAttendance，它是ajax调用。以下是javascript函数。

<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

以下是顺序：

我单击$('#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？

Answer 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();
}

AJAX加载后未触发jQuery事件。触发事件之前需要单击两次

1 个答案: