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

为了在bootbox.confirm框中显示两个输入字段，我在消息字段中嵌入了一个HTML表单。一切正常，但如果我在文本区域中输入文本，保存按钮将失去焦点，需要单击保存按钮两次才能执行保存并清除模式。不过，问题不在下面的代码范围之内。只需单击一下，即可正常工作。我实际上无法共享这其中的数千行代码，有人知道这可能是什么原因，以及我如何修复它吗

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

bootbox.confirm({
标题：“拯救食物”，
消息：“”+
' ' +
“保存”+
' ' +
' ' +
“问题”+
' ' +
' ' +
'保存前可以编辑您的问题'+
' ' +
' ' +
'注：'+
'   ' +
' ' +
' ' +
'' +
' ' +
' ' +
'   ',
按钮：{
“取消”：{
标签：“不保存”，
类名：“btn危险向左拉”
},
“确认”：{
标签：“保存”，
类名：“btn成功向右拉”，
}
}，回调：函数（结果）{if（结果==true）
{alert（'Success'）}
}
}
);

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

拯救
问题:
您可以在保存之前编辑问题
笔记：

脚本标记上的

type=“text/template”

属性意味着您的浏览器不会将标记的内容视为要执行的JavaScript。你几乎可以使用那里的任何东西，但是

text/template

很好地表达了意思，所以我坚持这样做

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

let message=$（'#表单模板'）.html（）；

有了它，我将更新您的引导箱用法，以使用

Bootbox.dialog

helper，而不是尝试使用

Bootbox.confirm

，以确认它不适用的内容。这是您的代码，已更新：

let message=$（'#表单模板'）.html（）；
让msgbox=bootbox.dialog({
标题：“拯救食物”，
讯息:讯息,，
按钮：{
“取消”：{
标签：“不保存”，
类名：“btn危险向左拉”
},
“确认”：{
标签：“保存”，
类名：“btn成功向右拉”，
回调：函数（）{
让form=msgbox.find（'form'）；
if（form.valid（））{
警报（“有效！”）；
msgbox.modal（'hide'）；
}
返回false；
}
}
}
});

---

使用对话框助手时，不再执行全局回调；相反，每个按钮都有自己的回调，如图所示。在这个例子中，我有

返回false作为最后一行，这样模态将不会自动关闭。这让我可以验证表单（这里，我假设jqueryvalidate正在使用）以及我想做的任何事情（比如通过AJAX提交表单等等）。然后，我们使用Bootstrap的
modal（）
函数关闭对话框。
在这种情况下，最好使用对话框帮助程序，而不是尝试使用confirm。不过，我在这里没有看到任何需要多次单击的内容。看起来您为消息创建的标记是无效的-可能值得为此使用模板。我会添加一个简单的答案，说明我的意思，一会儿。工作得很有魅力！我必须将表单作为串联消息进行维护，因为我有一些变量调用，我没有在示例中包括这些调用，但它既可以作为脚本模板，也可以作为串联消息使用。因此，最终可能是格式错误的HTML导致了双击。非常感谢，这让我快发疯了。