jQuery翻转！ div内的click事件 [英] jQuery Flip! click events inside divs
问题描述
我正在尝试为学校项目制作一个学习网站的闪存卡，我想使用翻转！ 我遇到了一个问题，尽管当我将锚点的点击事件绑定到要翻转的div内的flip函数时，我还是遇到了问题.我是jQuery新手.任何帮助，将不胜感激.有翻转论坛吗?我的代码在下面.
I am trying to make a flash card studying web app for a school project and I wanted to use Flip! I have an issue, though when I put the anchors with their click events bound to the flip function inside the divs to be flipped. I am new to jQuery. Any help would be appreciated. Is there a flip forum? My code is below.
<!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>
推荐答案
该翻转插件似乎破坏了您在准备好文档时设置的事件处理程序.解决方法是使用实时事件绑定.将您的文档就绪功能更改为此:
It appears the flip plugin destroys the event handlers that you set up on document ready. The way around it is to use live event binding. Change your document ready function to this:
$("#flip1").live('click', f2b);
$("#flip2").live('click', b2f);
$("#flip2").trigger('click');
我还应该提到，除非您在CSS中指定了宽度，否则初始动画似乎不会触发，
I should also mention that the initial animation doesn't seem to fire unless you have specified a width in your CSS, like this:
.card { height: 200px; width:200px; }
这篇关于jQuery翻转！ div内的click事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
