更新引导程序 4 模式的问题

Question

我正在 Spring Boot 中使用前端 JSP 开发应用程序。我有以下问题：

我有一个不同行的表。如果需要，我可以单击一个按钮来更新每一行。当我单击一行并更改一些数据时，一切正常。问题是当我单击一行时，关闭或保存此模式，然后打开另一行并再次编辑。模态很好，但是当我保存时，我收到 2 个 POST 来更新后面的行和实际的行。

我不使用任何奇怪的东西...可能我需要在关闭或保存时“清理”模态？

我的一个模态（这发生在所有带有模态更新行的表中）

HTML/JSP：

<!-- UPDATE DISP MODAL -->
<div id="updateDispModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <form id="updateDispForm" class="needs-validation">
                <div class="modal-header">
                    <div class="modal-title">
                        <h5 id="modalTitle">
                            <spring:message code="shares.displacement.update.btn" />
                        </h5>
                    </div>
                </div>
                <div class="modal-body">        
                    <div class="row">
                        <div class="col-sm-12 col-md-6">
                            <div class="form-group">
                                <label for="activityCenter" class="col-form-label"><spring:message code="shares.displacement.table.activity.center" /></label>
                                <select id="activityCenter" name="activityCenter" class="form-control" required>
                                    <option disabled selected="selected">
                                        <spring:message code="shares.displacement.table.activity.center" />
                                    </option>
                                    <c:forEach items="${teamLeaders}" var="teamLeader">
                                        <option value="${teamLeader.userId}">
                                            <spring:message code="${teamLeader.name} ${teamLeader.surnames}" />
                                        </option>
                                    </c:forEach>
                                </select>
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-6">
                            <div class="form-group">
                                <label for="displacementDate" class="col-form-label"><spring:message code="shares.displacement.table.total.time" /></label>
                                <input id="displacementDate" name="displacementDate" type="datetime-local" class="form-control" required>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-sm-12 col-md-6">
                            <label for="manualHours" class="col-form-label"><spring:message code="shares.displacement.total.time" /></label>
                            <input type="time" class="form-control" id="manualHours" name="manualHours">
                        </div>
                        
                        <div class="col-sm-12 col-md-6">
                            <label for="roundTrip" class="col-form-label"><spring:message code="shares.displacement.round.trip" /></label>
                            <input type="checkbox" class="form-control" id="roundTrip" name="roundTrip" style="width: 20px">
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col">
                            <div class="form-group">
                                <label for="observations" class="col-form-label"><spring:message code="shares.displacement.observations" /></label>
                                <textarea id="observations" name="observations" class="form-control" rows="6"></textarea>
                            </div>
                        </div>
                    </div>
                    
                    <input type="hidden" class="form-control" id="projectId" name="projectId">
                </div>
                <div class="modal-footer clearfix">
                    <div class="w-100">
                        <div class="float-left">
                            <button type="button" class="btn btn-sm" data-dismiss="modal"><spring:message code="cerrar" /></button>
                        </div>
                        <div class="float-right">
                            <button id="updateDispBtn" type="button" class="btn btn-sm btn-success"><spring:message code="save" /></button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- /CREATE MODAL -->

JavaScript：

$('#updateDispBtn').click(function () {
            
            $.ajax({
                type: "PUT",
                url: "/shares/displacement/" + id,
                data: $('#updateDispForm').serialize(),
                success: function(msg) {
                    $('#dTableSignings').DataTable().ajax.reload();
                    showNotify(msg, 'success');
                },
                error: function(e) {
                    showNotify(e.responseText, 'danger');
                }
            });

            $('#updateDispModal').modal('hide');
        });

Answer 1

最后，用户 Swati 帮我解决了这个问题。点击事件前需要解绑按钮：button onclick function firing twice

谢谢！