时间戳

首页 > 解决方案 > $(window).on('load', ...) 在 MS Edge 中发生得太快

javascript - $(window).on('load', ...) 在 MS Edge 中发生得太快

问题描述

我正在使用 Microsoft Edge 44.17763.1.0、Microsoft EdgeHTML 18.17763。

加载页面时，我无法让 Edge 触发选择选项更改事件。

我有一个select下拉框，当内容更改时，它会自动填充div所选文本。我想要的是这个页面在首次加载时自动执行此操作。也就是说，页面加载，初始化select下拉框，然后自动填充div现有的选择，而无需单击它。

jquery 将自动更新下拉事件的divon.change事件。select当用户用鼠标更改选择框内容时，这可以正常工作。选择选项是在页面第一次打开时初始化的，所以我把选择选项初始化放在$(document).ready事件中，然后我想在页面加载时自动触发选择更改事件，但是在select下拉菜单已经初始化之后，所以我把在$(window).on('load', ...事件中触发。

<html>
<head>
<title>Test</title>
<script language="javascript" type="text/javascript" src='/script/jquery-3.4.0.min.js'></script>
<script language="javascript" type="text/javascript">
$(function () {
  var entries = ['fred', 'barney', 'betty', 'wilma'];

  $.each(entries, function() {
    $('#foo_select').append($("<option />").val(this).text(this));
  });

  $('#foo_select').change(function() {
    $('#text').text($(this).val())
  })

  $('#text').empty()
})

$(window).on('load', function() {
  $('#foo_select').trigger('change')
})

</script>
</head>
<body>
  <select id='foo_select'>
  </select>
  <p>
  <div id='text' style='width: 100px'></div>
  </p>
</body>
</html>

我根据我读过的关于这两个事件的信息以这种方式编写了代码，这些信息在窗口加载和文档就绪函数之间的差异和Windows onload 与文档就绪之间进行了总结。此代码在 Firefox 和 Chrome 中运行良好。但是，它不适用于 Microsoft Edge。我确实确定加载事件在 Edge 中触发，它只是看起来（可能）太快了，就像在初始化下拉菜单之前一样，所以触发操作什么都不做。

根据我想在这里做什么，这是不正确的方法，还是 Edge 有问题？

附录：一些好的答案给了我一些选择，但问题仍然是为什么load原始事件在这种情况下不起作用。

标签： javascriptjqueryhtmlmicrosoft-edge

解决方案

您已经在使用 JQuery 的“就绪”回调，它确定何时加载文档以及DOM 准备好进行操作。你可以把你的触发事件放在那里。

$(function() {
  var entries = ['fred', 'barney', 'betty', 'wilma']

  $.each(entries, function() {
    $('#foo_select').append($('<option />').val(this).text(this));
  })

  $('#foo_select').change(function() {
    $('#text').text($(this).val())
  })

  $('#text').empty()

  $('#foo_select').trigger('change')
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="foo_select"></select>
<p id="text"></p>

推荐阅读