Событие jQuery не срабатывает после загрузки AJAX. Необходимо дважды щелкнуть, прежде чем событие будет запущено

Question

У меня есть страница, которая имеет родительскую форму и дочернюю форму.

Часть 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>
}

Ниже приводится последовательность:

1. Я нажимаю btnAdd, появится диалоговое окно attnModal.
2. Введите данные и нажмите btnAddAttendance
3. Система закроет attnModal, добавит данные и перезагрузит список посещаемости.
4. Я снова нажимаю btnAdd, но на этот раз 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();
}