0
Pourquoi cela ne fonctionnera-t-il pas?
J'ai une série d'événements où <body onload=""> === déclenche ==> ma autoload() fonction === devrait déclencher ===>$(document).ready === devrait déclencher ==>console.log(' FOCUS/BLUR EVENT ');La fonction .on() de document ready ne détecte pas les événements déclenchés par la fonction 'onload'
Maintenant, ma autoLoad() fonction ci-dessous est Elle est clairement déclenchée, car elle transforme les couleurs de fond des entrées en rouge, mais aucun message "FOCUS EVENT" ou "BLUR EVENT" n'est enregistré dans la console. Avec 4 tags <inputs>, je pense que j'obtiendrais 4 messages "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>