无法将 jQuery load() 与模态一起使用

Question

我正在使用 jQuery load() 添加包含表单的模式。任何专注于第一个领域的尝试都失败了。我的代码如下所示：

文件 foo.html 包含：

<div id='standardModal' class='modal fade' role='dialog'>
    <div class='modal-dialog'>
        <div class='modal-content'>
            <div id='standardModalBody' class='modal-body'>
                <form id='addRecord'>
                    <div class='form-group' id='intTypeD'>
                        <label for='intType'>Type</label>
                        <input type='text' class='form-control' id='intType'>
                        <small id='intTypeM' class='text-danger'></small>
                    </div>
                </form>
        </div>
    </div>
</div>

我的 JavaScript 电话：

$('#screens').load('foo.html', function() {
  $.getJSON('addRecord_initialize.php', function (result) {
     ...
  }.always(function () {
     $('#standardModal').modal('show');
  });
});

不，我已经尝试添加

$('#addRecord input:text, #addRecord textarea').first().focus();

或

$('#intType').focus();

在加载完成时调用的函数开头的右边，以及在 modal('show') 之后 - 但所有 4 个变体似乎都没有任何效果。

Answer 1

这里不用JQuery，直接用HTML即可。

<input type='text' class='form-control' id='intType' autofocus>

Answer 2

您的代码在这里似乎工作正常。

$(document).ready(function() {
  $('#addRecord input:text, #addRecord textarea').first().focus();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='standardModal' class='modal fade' role='dialog'>
  <div class='modal-dialog'>
    <div class='modal-content'>
      <div id='standardModalBody' class='modal-body'>
        <form id='addRecord'>
          <div class='form-group' id='intTypeD'>
            <label for='intType'>Type</label>
            <input type='text' class='form-control' id='intType'>
            <small id='intTypeM' class='text-danger'></small>
          </div>
        </form>
      </div>
    </div>
  </div>

Answer 3

您的模式需要一些时间才能打开，浏览器需要一些时间来回流，尤其是在有过渡的时候。因此，您可以在一定时间后使用简单的 setTimeout 设置焦点，或者 - 甚至更好 - 通过使用您的模态插件提供的事件。

在您的 .always 中 - 假设您使用的是 Bootstrap 模态（如果不是，请另行说明）：

$('#standardModal').on('shown.bs.modal', function () {
  $('#intType').trigger('focus')
})

此外，这里是参考：https://getbootstrap.com/docs/4.0/components/modal/

Due to how HTML5 defines its semantics, the autofocus HTML attribute has no effect in Bootstrap modals. To achieve the same effect, use some custom JavaScript.

如果这也不起作用，您应该改变策略：在您的主页中保留空模态的存根，然后使用 ajax 请求仅填充内容 div .这样，您将在您的主页上始终可以使用事件处理程序和所有其他插件内容。

Answer 4

谢谢大家，这成功了：

$('#standardModal').on('shown.bs.modal', function () {
  $('#intType').trigger('focus')
})

奇怪的是，我以为我已经通过在调试器中等待解决了那个可能的问题，但显然它不一样。

自动对焦在大多数浏览器上都有问题，这就是我开始使用 jQuery 选项的原因。

再次感谢，案件结案。

无法将 jQuery load() 与模态一起使用

Cannot focus using jQuery load() with modal

jquery

load

focus

modal-dialog