我不能在我的FancyZoom弹出窗口中使用JQuery吗？ [英] Can't I use JQuery inside my FancyZoom popup?
问题描述
我们正在使用 FancyZoom 生成标准的javascript屏幕上的弹出效果。
We're using FancyZoom to generate a standard javascript popup effect on the screen.
我们希望使用JQuery响应用户点击以更改FancyZoom刚刚为用户弹出的区域内的某些颜色（使用.attr）。
We want to use JQuery to respond to user clicks to change some colours (using .attr) inside the area that FancyZoom has just popped up for the user.
（在下面的代码示例中，我用简单的 alert 替换了所有的.attr内容，只是为了说明这一点。 Bar.png是一个黄金矩形，单击时应该显示Hello World。点击Test显示fanzy popup。）
(In the code sample below I've replaced all the .attr stuff with a simple alert just to illustrate the point. Bar.png is a gold rectangle which should show Hello World when clicked on. Clicking on "Test" shows the fanzy popup.)
如果我们把bar.png放在像这样的弹出窗口，当我们点击它时它会按预期响应：
If we put bar.png outside the popup like this, it responds as expected when we click on it:
<script type="text/jscript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/fancyzoom.js"></script>
<script>
$(document).ready(function() {
$('#foo').on({ 'click': function() { alert('hello world'); } });
});
</script>
</head>
<body>
<a id="myFancyZoomPopup" href="#Test"><span>test</span></a>
<div id="Test">
<p> this is some text in the popup</p>
</div>
<img id="foo" src="i/bar.png" alt="asdf"/>
<script type="text/javascript">
$('#myFancyZoomPopup').fancyZoom({ directory: 'i'});
</script>
</body>
但是如果我们把它放在我们想要的地方 - 在FancyZoom弹出面板中 - 就像这样，我们的警报不会触发：
But if we put it where we want it - inside the FancyZoom popup panel - like so, our alert doesn't fire:
<script type="text/jscript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/fancyzoom.js"></script>
<script>
$(document).ready(function() {
$('#foo').on({ 'click': function() { alert('hello world'); } });
});
</script>
</head>
<body>
<a id="myFancyZoomPopup" href="#Test"><span>test</span></a>
<div id="Test">
<p> this is some text in the popup</p>
<img id="foo" src="i/bar.png" alt="asdf"/>
</div>
<script type="text/javascript">
$('#myFancyZoomPopup').fancyZoom({ directory: 'i'});
</script>
</body>
结果：当我们点击黄金矩形时没有hello world。
Result: no "hello world" when we click on the gold rectangle.
推荐答案
正如之前的海报所说，元素被重新创建，因此点击功能的指针不会侦听fancybox中的元素。
As previous poster said, the element is recreated so the pointer for the click-function don't listen to the elements inside the fancybox.
但是不使用live，它已被弃用。你想要的是将clickevent绑定到一个永远存在的元素，比如你有一个名为#container的fancybox的div容器，这就是你应该编写代码的方式。
However don't use live, it's deprecated. What you wan't is to bind the clickevent to a element that will always exists, say you got a div-container for your fancybox called #container, this is how you should write your code.
$('#container').on('click', '#foo', function() {
// code goes here.
});
你只需要在.on（）函数中找到你想要偶数听的确切元素就像我上面做的那样。
You simply stick in the exact element you want the even to listen for in the .on() function like I did above.
这篇关于我不能在我的FancyZoom弹出窗口中使用JQuery吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
