jQuery翻轉！點擊divs裏面的事件

我正在試圖製作一個閃存卡學習項目的網絡應用程序，我想用Flip!我有一個問題，但是當我把它們的click事件綁定到div內的flip函數被翻轉。我是jQuery的新手。任何幫助，將不勝感激。是否有翻轉論壇？我的代碼如下。jQuery翻轉！點擊divs裏面的事件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Flippant</title> 
    <script src="http://www.google.com/jsapi" type="text/javascript"></script> 
    <script type="text/javascript"> 
    //<![CDATA[  
    google.load("jquery", "1.3.2"); 
    google.load("jqueryui", "1.7.2"); 
    //]]> 
    </script> 
    <script type="text/javascript" src="jquery.flip.js"></script> 
    <script type="text/javascript"> 
    var f2b = function(){ 
    $("#card").flip({ 
     direction: 'tb', 
     color: '#B34212', 
     content: $('#back') 
    }); 
    } 

    var b2f = function(){ 
    $("#card").flip({ 
     direction: 'tb', 
     color: '#B34212', 
     content: $('#front') 
    }); 
    } 
    $(document).ready(function(){ 
    $("#flip1").click(f2b); 
    $("#flip2").click(b2f); 
    $("#flip2").click(); 
    }); 
    </script> 
    <style type="text/css"> 
    .back { display: none; } 
    .front { display: none; } 
    </style> 
</head> 
<body> 
    <div class="card" id="card"></div> 
    <div class="front" id="front"> 
    This is <br /> 
    the front <br /> 
    of the card. <br /> 
    <a href="#" id="flip1" title="flip to back">Flip1</a> 
    </div> 
    <div class="back" id="back"> 
    This is<br /> 
    the back<br /> 
    of the card.<br /> 
    <a href="#" id="flip2" title="flip to front">Flip2</a> 
    </div> 
</body> 
</html>

來源

2009-09-26 kzh

爲什麼你有2個點擊功能分配給＃flip2？ – yoda 2009-09-26 23:24:53

第二個調用第一個設置的點擊功能。第二個不分配任何東西。 – kzh 2009-09-27 01:32:01

對不起，我不明白你的問題。現在正在做什麼，它應該做什麼？你剛纔說「我有問題。」 – 2009-09-27 02:00:55

它似乎翻轉插件破壞您在文檔準備就緒設置的事件處理程序。解決方法是使用live event binding。更改文檔準備功能，這一點：

$("#flip1").live('click', f2b); 
$("#flip2").live('click', b2f); 
$("#flip2").trigger('click');

編輯：我還要提到的是，最初的動畫似乎不火，除非你已經在你的CSS指定的寬度，這樣的：

.card { height: 200px; width:200px; }

來源

2009-09-27 03:06:05

jQuery翻轉！點擊divs裏面的事件

回答

相關問題