Функция готового документа.on() не принимает события, вызванные функцией onload
Почему это не сработает?
У меня есть серия мероприятий, где <body onload=""> === триггеры ==> мой autoload() функция === должна срабатывать ===> $(document).ready === должно сработать ==> console.log(' FOCUS/BLUR EVENT ');
Теперь мой autoLoad() Приведенная ниже функция явно сработала, поскольку она меняет цвет фона входных сигналов на красный, однако в консоли не регистрируются сообщения "СОБЫТИЕ ФОКУСА" или "СОБРАННОЕ СОБЫТИЕ". С 4 <inputs> теги, я думаю, что я получу 4 сообщения "FOCUS EVENT" и 4 сообщения "BLUR EVENT".
<html>
<head>
<script src="../../js/jquery-3.1.1.min.js"></script>
<script>
function consoleLogger1() {
console.log(' FOCUS EVENT ');
}
function consoleLogger2() {
console.log(' BLUR EVENT ');
}
$(document).ready(function(){ //EVENT LISTENER
$("form input").on("focus", consoleLogger1);
$("form input").on("blur", consoleLogger2);
});
function autoLoad() {
$("form input").each(function() {
$(this).css('background-color', 'red'); //WORKS!
$(this).focus();
/*Should trigger the event-listener above
to trigger consoleLogger1 above, but doesn't.*/
$(this).blur();
/*Should trigger the event-listener above
to trigger consoleLogger2 above, but doesn't.*/
});
}
</script>
</head>
<!--MMMMMMMMMMMMMMMMMMMMMMMMMMMMMM---DIVIDER---MMMMMMMMMMMMMMMMMMMMMMMMMMM-->
<body onload="autoLoad()">
<form>
<input style="width: 136px;"></input><br>
<input style="width: 136px;"></input><br>
<input style="width: 136px;"></input><br>
<input style="width: 136px;"></input><br>
</form>
</body>
</html>
1 ответ
Я не знаю, почему это не сработало, но успешным обходным путем было удаление двух строк прослушивателя событий...
$("form input").on("focus", consoleLogger1);
$("form input").on("blur", consoleLogger2);
...от $(document).ready функции, и вместо этого вставьте их как первое, что внутри фактического autoLoader() функция.