jQuery Flippy插件未在Click事件上触发

问题描述

我在使用jQuery Flippy插件的flippy插件标签时遇到了一个小问题 http://blog.guilhemmarty.com/flippy/

I have a small problem with flippy plugin tag with jQuery Flippy pluginhttp://blog.guilhemmarty.com/flippy/

我有一个带有p标签的div

I have one div with p tag

<div id="divID">
<p id="pID" class="someClass">Some text
<a id="aID" href="#">Some text</a> </p>
</div>

和我页面上的事件处理程序

and event handler on my page

$("#aID").click(function(){
    var content = $("#divID").html();
$("#divID").flippy({
    direction:"LEFT",
    duration: "500",
    verso: content

 });
});

问题在于，当我单击要翻转div的元素时，div被翻转了，但是click函数无法处理另一次点击.

The problem is that, when I click the element to flip div, the div are flipped,but the click function doesn't handle another click.

我只能将div翻转一次.当我将"a"元素放置在div之外时，我可以随意翻转，但这不是我的目标.

I can flip the div only once. When I place the "a" element outside of the div, I can flipped as long as i want, but this is not my objective.

任何人都可以给我建议.

Can anyone advice me please.

推荐答案

由于在div翻转后我在div中注册的所有事件侦听器都不可用，因此我在翻转后再次注册了此侦听器

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});

即:

在我的JSP中:`$(document).ready(function(){

In my JSP: `$(document).ready(function() {

$("#register").click(function() {
    switchRegister();

});

$("#forgPass").click(function() {
    forgPass();
});

});`

在.js文件中:

/* *将登录屏幕切换到注册屏幕 */

/* * Switch Login Screen to Register Screen */

功能switchRegister(){ var mainContent = $(#LoginBox").html();

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){

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();
            });
        }
     });
}

}

/* * 忘记密码 */函数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");
        });
    }
 });

}

这篇关于jQuery Flippy插件未在Click事件上触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！