我的 bootbox.js 确认对话框需要点击两次才能保存

Question

为了在 bootbox.confirm 框中显示两个输入字段，我在消息字段中嵌入了一个 HTML 表单。一切正常，但如果我在 textarea 中输入文本，保存按钮会失去焦点，需要两次单击保存按钮才能执行保存并清除模式。不过，问题出在下面的代码之外。这个jsfiddle 一键就可以正常工作。我实际上无法分享其中的数千行代码，有谁知道可能是什么原因造成的以及我该如何解决？

bootbox.confirm({
      title: "Save Foo",
      message: '<div class="row">  ' +
      '<div class="col-md-12"> ' +
      '<div class="text-center">Save</div>' +
      '<form class="form-horizontal"> ' +
      '<div class="form-group"> ' +
      '<label class="col-md-4 control-label" for="Question">Question</label> ' +
      '<div class="col-md-4"> ' +
      '<input id="name" name="name" type="text" value="Question" class="form-control input-md"> ' +
      '<span class="help-block">You can edit your question before saving</span> </div> ' +
      '</div> ' +
      '<div class="form-group"> ' +
      '<label class="col-md-4 control-label" for="notesbox">Notes:</label> ' +
      '<div class="col-md-4"> <div class="textarea"> <label for="notesbox"> ' +
      '<textarea name="notesbox" id="notesbox" rows="10" cols="30"></textarea></form></div> ' +
      '</label> ' +
      '</div>' +
      '</div> ' +
      '</div> </div>' +
      '</form> </div>  </div>',
    buttons: {
        'cancel': {
            label: 'Don\'t save',
            className: 'btn-danger pull-left'
        },
        'confirm': {
            label: 'Save',
            className: 'btn-success pull-right',
        }
    },callback: function (result) { if (result == true)
    { alert('Success')}
                  }
                }
              
        );

Answer 1

我将从使用脚本模板开始，而不是使用字符串连接来构建您的消息 - 这会使您当前的消息具有一些无效的标记很明显，这对您没有任何好处。这是这样做的一种方法：

<script type="text/template" id="form-template">
    <div class="text-center">Save</div>
    <form class="form-horizontal">
        <div class="form-group">
            <label class="col-md-4 control-label" for="Question">Question</label>
            <div class="col-md-4">
                <input id="name" name="name" type="text" value="Question" class="form-control input-md">
                <span class="help-block">You can edit your question before saving</span> 
            </div>
        </div>
        <div class="form-group">
            <label class="col-md-4 control-label" for="notesbox">Notes:</label>
            <div class="col-md-4"> 
                <div class="textarea"> 
                    <textarea class="form-control" name="notesbox" id="notesbox" rows="10" cols="30"></textarea>
                </div>
            </div>
        </div>
    </form>
</script>

脚本标签上的type="text/template" 属性意味着您的浏览器不会将标签的内容视为要执行的JavaScript。你几乎可以在那里使用任何东西，但text/template 很好地传达了这个意思，所以我坚持下去。

使用该模板标签，您可以通过执行以下操作获取对话框的消息：

let message = $('#form-template').html();

有了这些，我会更新您的 Bootbox 用法以使用 bootbox.dialog 助手，而不是尝试将 bootbox.confirm 用于它不适合的用途。这是您的代码，已更新：

let message = $('#form-template').html();

let msgbox = bootbox.dialog({
    title: "Save Foo",
    message: message,
    buttons: {
        'cancel': {
            label: "Don't save",
            className: 'btn-danger pull-left'
        },
        'confirm': {
            label: 'Save',
            className: 'btn-success pull-right',    
            callback: function () {
                let form = msgbox.find('form');
                if(form.valid()){
                    alert('Valid!');
                    
                    msgbox.modal('hide');
                }
                
                return false;
            }
        }
    }
});

使用对话框助手时，不再执行全局回调；相反，每个按钮都有自己的回调，如图所示。在这个例子中，我将return false; 作为最后一行，这样模态框就不会自动关闭。这让我可以验证表单（在这里，我假设 jQuery Validate 正在使用）以及我想做的任何其他事情（例如通过 AJAX 提交表单等）。然后，我们使用 Bootstrap 的 modal() 函数来关闭我们的对话框。