Because all my event listeners registered in div are not available after flipping div, I register this listeners again after flipping
$(document).on("click", "#element", function(){ do something});
i.e:
In my JSP: `$(document).ready(function() {
$("#register").click(function() {
switchRegister();
});
$("#forgPass").click(function() {
forgPass();
});
});`
And in .js file:
/* * Switch Login Screen to Register Screen */
function switchRegister() { var mainContent = $("#LoginBox").html();
$("#btnLogIn").prop('value', regText);
$("#regProfile").hide();
$("#regPass").hide();
$("#iconName").show();
$("#regText").show();
$("#goBack").show();
var content = $("#LoginBox").html();
$("#LoginBox").flippy({
direction:"LEFT",
duration: "500",
verso: content,
onFinish: function() {
$("#goBack").on("click", function(){
$("#LoginBox").empty();
backToLogin(mainContent, "right");
});
}
});
}
/* * Back to Login Screen */
function backToLogin(content,direction) {
if(direction == "right") {
console.log("direction RIGHT");
$("#LoginBox").flippy({
direction:"RIGHT",
duration: "500",
verso: content,
onFinish: function(){
$(document).on("click", "#register", function(){
switchRegister();
});
$(document).on("click", "#forgPass", function(){
forgPass();
});
}
});
} else {
console.log(" direction Bottom");
$("#LoginBox").flippy({
direction:"BOTTOM",
duration: "500",
verso: content,
onFinish: function(){
$("#register").on("click", function(){
switchRegister();
});
$("#forgPass").on("click", function(){
forgPass();
});
}
});
}
}
/* * Forgot password */ function forgPass() {
var mainContent = $("#LoginBox").html();
$("#btnLogIn").prop('value', passText);
$("#regPass").hide();
$("#regProfile").hide();
$("#iconPass").hide();
$("#regText").hide();
$("#goBack").show();
var content = $("#LoginBox").html();
$("#LoginBox").flippy({
direction:"TOP",
duration: "500",
verso: content,
onFinish: function() {
$("#goBack").on("click", function(){
$("#LoginBox").empty();
backToLogin(mainContent, "bottom");
});
}
});
}