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');
});

这表示modal-footer内有click button个#newReservationName，触发hide.bs.modal隐藏（id）。

您可以通过添加$("#newReservationName .modal-footer > button").unbind().click(function() { clicked = $(this).text(); $("#newReservationName").modal('hide'); });模式来解决此问题，该模式会触发此代码，如：

<select id = "mySelectID" name = "select" data-sel="select"> 
    <option value=""></option>
</select>

Modal catch点击其他模态

1 个答案: