JQuery flippy插件在Click事件上未触发
使用jQuery Flippy插件的flippy
插件标签有一个小问题http://blog.guilhemmarty.com/flippy/
我有一个带p
标签的div
Some text Some text
和我的页面上的事件处理程序
$("#aID").click(function(){ var content = $("#divID").html(); $("#divID").flippy({ direction:"LEFT", duration: "500", verso: content }); });
问题是,当我单击元素来翻转div时,div会被翻转,但是clickfunction不会处理另一次点击。
我只能翻转div一次。 当我将“a”元素放在div之外时,只要我愿意,我就可以翻转,但这不是我的目标。
任何人都可以建议我。
因为在翻转div后我在div中注册的所有事件监听器都不可用,所以我在翻转后再次注册这些监听器
$(document).on("click", "#element", function(){ do something});
即:
在我的JSP中:`$(document).ready(function(){
$("#register").click(function() { switchRegister(); }); $("#forgPass").click(function() { forgPass(); }); });`
在.js文件中:
/ * *将登录屏幕切换到注册屏幕* /
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"); }); } });
}
/ * *返回登录屏幕* /
function backToLogin(内容,方向){
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(); }); } }); }
}
/ * *忘记密码* / 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"); }); } });
}
尝试jQuery Flip
和Git Hub URL