jQuery翻转！ div内的点击事件答案

【问题标题】：jQuery Flip! click events inside divsjQuery翻转！ div内的点击事件
【发布时间】：2009-09-26 21:30:15
【问题描述】：

我正在尝试为一个学校项目制作一个学习网络应用程序的闪存卡，我想使用Flip! 我有一个问题，但是当我将锚点及其点击事件绑定到 div 内的翻转功能时被翻转。我是 jQuery 的新手。任何帮助，将不胜感激。有翻转论坛吗？我的代码如下。

<!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>

【问题讨论】：

为什么你有 2 个点击功能分配给#flip2？
第二个调用第一个设置的点击函数。第二个没有分配任何东西。
对不起，我不明白你的问题。它现在在做什么，它应该做什么？你刚才说“我有问题。”

标签： jquery jquery-ui jquery-plugins

【解决方案1】：

翻转插件似乎破坏了您在准备好文档时设置的事件处理程序。解决方法是使用live event binding。将您的文档就绪功能更改为：

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

编辑：我还应该提到，除非您在 CSS 中指定宽度，否则初始动画似乎不会触发，如下所示：

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

【讨论】：