$ (window) .on ('load', ...) происходит слишком рано в MS Edge - PullRequest
Новая
       17

$ (window) .on ('load', ...) происходит слишком рано в MS Edge

0 голосов
/ 18 апреля 2019

Я использую 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>

Я написал код таким образом, основываясь на информации, которую я прочитал об этих двух событиях, и которая обобщена в Разница между функциями загрузки окна и готовности к документу и Загрузка Windows по сравнению с готовым документом . Этот код отлично работает в Firefox и Chrome. Однако он не работает в Microsoft Edge. Я определил, что событие загрузки запускается в Edge, просто оно (возможно) слишком рано, как до инициализации выпадающего меню, поэтому действие триггера ничего не делает.

Исходя из того, что я хочу сделать здесь, это неправильный подход или есть проблема с Edge? <Ч /> ADDENDUM : Несколько хороших ответов дали мне несколько альтернатив, но все еще остается вопрос, почему событие load в оригинале не работает в этом контексте.

Ответы [ 2 ]

3 голосов
/ 18 апреля 2019

Вы уже используете «готовый» обратный вызов 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>
1 голос
/ 18 апреля 2019

Почему бы вам просто не «вызвать» его при создании опций?
Есть ли какая-то польза от запуска после загрузки документа?

Если нет, просто примените «начальное значение» с самого начала.

Это также будет означать перемещение вашего сценария после HTML-разметки, непосредственно перед закрывающим тегом - для того, чтобы #text div существовал в DOM во время выполнения . 

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

(надеюсь, код правильный, я не использую JQuery - но вы получаете сообщение :))

...