我的bootbox.js确认对话框需要单击两次以保存

问题描述

为了在bootBox.confirm框中显示两个输入字段，我在消息字段中嵌入了HTML表单。一切正常，但是如果我在文本区域中输入文本，则“保存”按钮将失去焦点，并且需要两次单击“保存”按钮才能执行保存和清除模态。但是，问题出在以下代码的外部。该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')}
                  }
                }
              
        );

解决方法

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

setTimeout(function animate() {
  if (count == 100 && per == 100) {
    clearInterval(loading);
  } else {
    per = per + 1;
    count = count + 1;
    progress.style.width = per + "px";
    percent.textContent = count + "%";
  }
},2000);

script标记上的<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>属性意味着您的浏览器不会将该标记的内容视为要执行的JavaScript。您几乎可以在那里使用几乎任何东西，但是type="text/template"传达的含义很好，所以我坚持使用。

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

text/template

有了该功能，我将更新您的Bootbox使用量，以使用let message = $('#form-template').html();帮助程序，而不是尝试将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; } } } });作为最后一行，因此该模式不会自动关闭。这使我可以验证表单（在这里，我假设正在使用jQuery Validate）以及其他我想做的事情（例如，通过AJAX提交表单等）。然后，我们使用Bootstrap的return false;函数关闭对话框。

bootbox javascript