Problem Jquery and .one function since firefox update
Hi there,
i've found a bug that only occurs in newest Firefox or Chrome. In older Versions it works, in Internet Explorer 11 it works too.
I have 2 Layers: "maincontent" and "subcontent". The "maincontent" layer shows a Link to hide "maincontent" and show "subcontent". In "subcontent" is a link to hide "subcontent" and show "maincontent" again. Simple. When i klick the link in "maincontent" i have a small fadeout effect with animate.css: maincontent fades out, wait for animation ends, after animation ends it hide maincontent and show subcontent.
Here a short test-script. Just copy it in a blank html file and test it yourself in act firefox (49.0.2):
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Test</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<body>
<div id="maincontent">
<div id="animtext" class="animated jello">ANIMATED TEXT</div>
<a id="loadclick" href="javascript:;">open subcontent</a>
</div>
<div id="subcontent">
you are on subcontent now
<a id="unloadclick" href="javascript:;">close subcontent</a>
</div>
<script>
function load_subcontent() {
$('#maincontent').addClass('animated fadeOut').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
$('#maincontent').removeClass().hide();
$('#subcontent').show();
alert('subcontent loaeded');
});
}
$('#loadclick').click(function() {
load_subcontent();
});
$('#unloadclick').click(function() {
$('#subcontent').hide();
$('#maincontent').show();
});
$(document).ready(function (){
$('#subcontent').hide();
});
</script>
</body>
</html>
The problem occurs when i close "subcontent". When "maincontent" is show again the little animation "ANIMATED TEXT" in "maincontent" (layer id: animtext) runs again, but after it ends it jumps back in the load_subcontent() function and triggers the one.(animationend) event again. I dont know why? I never run this function.
You can check that on the little alert box that says "subcontent loaeded" - This alert box is shown when i close "subcontent" too, but why?
When you remove the "ANIMATED TEXT" layer (id: animtext) or remove the animation (remove Class "animated jello") script works fine!
Problem occurs ín new firefox and crome version. In older Versions or Internet Explorer 11 it works!
I think the Problem here is not animate.css or Jquery itself. Seems to be a Bug in Firefox and Chrome, because in older Versions it works fine.
Hope someone can help....