我使用的是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 functions和Windows onload vs document ready中进行了总结。此代码在Firefox和Chrome中运行良好。但是,它不适用于Microsoft Edge。我确实确定了load事件在Edge中触发,它只是显示(可能)太快,就像在初始化下拉列表之前一样,因此触发器操作什么都不做。
基于我想在这里做什么,这是不正确的方法,还是Edge存在问题?
load
event in the original doesn't work in this context.
您已经在使用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>
为什么不在创建选项时简单地“触发”它? 文档加载后触发它有什么好处吗?
如果没有,只需从一开始就应用'起始值'。
这也意味着在HTML标记之后,在结束</ body>标记之前移动脚本 - 以便在执行时#text div存在于DOM中。
// use this
$('#text').text($('#foo_select').val())
// instead of
$('#text').empty()
(希望代码是正确的,我不使用JQuery - 但你得到消息:))