$(窗口).on('load',...)在MS Edge中发生得太快了

问题描述 投票:0回答:2

我使用的是Microsoft Edge 44.17763.1.0,Microsoft EdgeHTML 18.17763。

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

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

jquery将在div事件中自动更新.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>

我根据我读过的有关这两个事件的信息以这种方式编写代码,并在Difference between window load and document ready functionsWindows onload vs document ready中进行了总结。此代码在Firefox和Chrome中运行良好。但是,它不适用于Microsoft Edge。我确实确定了load事件在Edge中触发,它只是显示(可能)太快,就像在初始化下拉列表之前一样,因此触发器操作什么都不做。

基于我想在这里做什么,这是不正确的方法,还是Edge存在问题?


ADDENDUM: A couple of good answers have given me some alternatives, but the question still remains as to why the load event in the original doesn't work in this context.
javascript jquery html microsoft-edge
2个回答
3
投票

您已经在使用JQuery的“ready”回调函数来确定何时加载文档并且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>

1
投票

为什么不在创建选项时简单地“触发”它? 文档加载后触发它有什么好处吗?

如果没有,只需从一开始就应用'起始值'。

这也意味着在HTML标记之后,在结束</ body>标记之前移动脚本 - 以便在执行时#text div存在于DOM中。

// use this
$('#text').text($('#foo_select').val())
// instead of
$('#text').empty()

(希望代码是正确的,我不使用JQuery - 但你得到消息:))

© www.soinside.com 2019 - 2024. All rights reserved.