Boobtbox 对话框在单击时关闭并且页面刷新

Question

我最近将 html 页面中的页面代码更改为 aspx 页面，因为我需要实现母版页。代码和函数在 htmlpage 中运行良好，但由于我已将其更改为 aspx 页面，因此引导框对话框停止正常工作，只要我单击它，它就会立即关闭并刷新页面。这些是我使用的脚本。

    <script src="Scripts/jquery-3.1.1.js"></script>
    <script src="Scripts/popper.js"></script>
    <script src="Scripts/bootstrap.js"></script>
    <script src="Scripts/bootbox.js"></script>

以下是页面的一些功能：

function disableTool(Herramientaid) {
            bootbox.confirm({
                message: "¿Estas seguro que deseas eliminar este herramienta?",
                buttons: {
                    confirm: {
                        label: 'Si',
                        className: 'btn-success'
                    },
                    cancel: {
                        label: 'No',
                        className: 'btn-danger'
                    }
                },
                callback: function (result) {
                    if (result) {
                        sendRequest('DisableTool', { "Herramientaid": Herramientaid },
                            function (response) {
                                if (response[0] == 'OK') {
                                    gettool();
                                    bootbox.alert('La herramienta se ha eliminado');
                                }
                                else {
                                    bootbox.alert('Error! ' + response[0]);
                                }
                            });
                    }
                }
            });
        }

        function UpdateTool(ToolControl) {
            var Herramientaid = $(ToolControl).parent().parent().find('td').eq(0).html();
            var NombreH = $(ToolControl).parent().parent().find('td').eq(1).html();
            var Adminid = $(ToolControl).parent().parent().find('td').eq(2).html();
            var HDesc = $(ToolControl).parent().parent().find('td').eq(3).html();
            bootbox.dialog({
                title: "Actualizar herramientas",
                message: '<div class="row">  ' +
                    '<div class="col-md-12"> ' +
                    '<div class="form-group"> ' +
                    '<label class="col-md-3 control-label" for="txNombreH">Nombre:</label> ' +
                    '<div class="col-md-9"> ' +
                    '<input type="text" id="txNombreH" class="form-control" placeholder="Nombre" value=""' + NombreH + '/>' +
                    '</div>' +
                    '</div>' +
                    '<div class="form-group"> ' +
                    '<label class="col-md-3 control-label" for="txAdminid">ID del Administrador:</label> ' +
                    '<div class="col-md-9"> ' +
                    '<input type="text" id="txAdminid" class="form-control" placeholder="Administrador ID" value=""' + Adminid + '/>' +
                    '</div>' +
                    '</div>' +
                    '<div class="form-group"> ' +
                    '<label class="col-md-3 control-label" for="txHDesc">Descripcion de la herramienta:</label> ' +
                    '<div class="col-md-9"> ' +
                    '<input type="text" id="txHDesc" class="form-control" placeholder="Descripcion" value=""' + HDesc + '/>' +
                    '</div>' +
                    '</div>' +
                    '</div>' +
                    '</div>',
                buttons: {
                    No: {
                        label: "No",
                        className: "btn-danger",
                        callback: function () {

                        }
                    },
                    Yes: {
                        label: "Si",
                        className: "btn-success",
                        callback: function () {
                            var newNombreH = $('#txNombreH').val();
                            var newAdminid = $('#txAdminid').val();
                            var newHDesc = $('#txHDesc').val();
                            sendRequest('UpdateTool', {
                                "Herramientaid": Herramientaid, "NombreH": newNombreH, "Adminid": newAdminid, "HDesc": newHDesc
                            },
                                function (response) {
                                    if (response[0] == 'OK') {
                                        gettool();
                                        bootbox.alert('Se ha configurado la herramienta');
                                    }
                                    else {
                                        UpdateTool(ToolControl);
                                        bootbox.alert('Error! ' + response[0]);
                                    }
                                }
                            )
                        }
                    }
                }
            });
        }

Answer 1

我今天也遇到了同样的问题，更新到最新最好的 bootbox 并没有帮助。我最终追踪到“关闭”、“确定”、甚至“Esc”的按钮点击都触发了表单事件的提交。

在调用我的对话框后，我不得不添加一个传播捕获器：

$(".dialog-class-name").on('hidden.bs.modal', function (e) {
   e.preventDefault();
   e.stopPropagation();
});

感觉很hacky，但它不涉及编辑实际的库，而且确实有效....