模態捕捉其他模態的點擊

Question

我有兩個模式的問題，直到newReservationName至少出現一次，所有情況都可以正常工作，在這種情況下， $("#newReservationName").unbind().on('hide.bs.modal', function()
趕上的點擊reservationTimeError而且由於按鈕ok ，而不是close喜歡它進入代碼的其他模式。 當然，我可以更改按鈕名稱，但是為什么該模態會捕獲另一個模態的事件？

if( view.name != 'month' && end.format() < moment().format()) {
    $('#reservationTimeError').modal('show');
    $('#calendar').fullCalendar('unselect');
    validTime = false;
}
//enable selection, so creation new events, only for Day agenda
if(validTime && view.name != 'month') {
    $('#newReservationName').modal('show');
    //unbind guarantee one fire for the event
    $(".modal-footer > button").unbind().click(function() {
        clicked = $(this).text();
        $("#newReservationName").modal('hide');
    });
    $("#newReservationName").unbind().on('hide.bs.modal', function() {
        if (clicked != "Close"){
            bookingForm.name =document.getElementById('reservationName').value;
            bookingForm.startTime= start.utc().format('HH:mm');
           }
     });
}

兩種模式的HTML：

<div class="modal" id="newReservationName" data-backdrop="static"
    data-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Reservation name</h4>
            </div>
            <div class="modal-body">
                <form novalidate class="simple-form"
                    name="newReservationNameForm">
                    <div class="box-body">
                        <input style="width: 100%;" pattern=".{1,255}"
                            data-ng-model="reservation.name"
                            placeholder="Please insert a valid name for this reservation"
                            required type="text" id="reservationName">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default"
                    data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary"
                    data-ng-disabled="newReservationNameForm.$invalid">OK</button>

            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>

<!-- Modal that get reservation name -->
<div class="modal modal-danger" id="reservationTimeError"
    data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Reservation impossible</h4>
            </div>
            <div class="modal-body">
                <div class="box-body">Your reservation is not valid
                    because the date is previous to the current one</div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline"
                    data-dismiss="modal">OK</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>

Answer 1

當然，我可以更改按鈕名稱，但是為什么該模態會捕獲另一個模態的事件？

我認為您的問題在這里：

$(".modal-footer > button").unbind().click(function() {
     clicked = $(this).text();
     $("#newReservationName").modal('hide');
});

這表示任何在button內部click modal-footer ，都會觸發#newReservationName hide（ hide.bs.modal ）。

您可以通過添加觸發以下代碼的模態id來修復它：

$("#newReservationName .modal-footer > button").unbind().click(function() {
      clicked = $(this).text();
      $("#newReservationName").modal('hide');
});