我不能在我的FancyZoom弹出窗口中使用JQuery吗？

我们使用FancyZoom在屏幕上生成标准的JavaScript弹出效果。我不能在我的FancyZoom弹出窗口中使用JQuery吗？

我们希望使用JQuery来响应用户点击以更改FancyZoom为用户弹出的区域内的某些颜色（使用.attr）。

（在下面的代码示例中，我用一个简单的alert代替了所有.attr的东西，只是为了说明这一点。Bar.png是一个黄金矩形，点击时应该显示Hello World，点击“Test”显示fanzy弹出）

如果我们把bar.png这样弹出外，它响应当我们点击它预计：

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

enter image description here

但是，如果我们把它放在我们想要它 - 的FancyZoom弹出面板里面 - 就像这样，我们的警报不火：

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

enter image description here

结果：没有“世界你好”当我们点击黄金矩形。

来源

2012-04-27 hawbsl

FancyZoom可能在图像上分层放置东西。你有没有检查是否是这种情况？ – 2012-04-27 11:56:53

@JamieDixon不，我不认为这是事实。下面的答案似乎钉住它 – hawbsl 2012-05-03 16:49:08

我猜这个#foo元素会在弹出窗口中重新创建，所以对事件的引用会丢失。

尝试使用“live”版本的on()，以便捕获未来元素的事件。

$(selector).live(events, data, handler);    // jQuery 1.3+ 
$(document).delegate(selector, events, data, handler); // jQuery 1.4.3+ 
$(document).on(events, selector, data, handler);  // jQuery 1.7+

检查链接：http://api.jquery.com/live/

来源

2012-04-27 12:16:06

感谢它的工作原理：'$（this）.on（'click'，'#foo'，function（）{alert（'hello world'）;}）;' – hawbsl 2012-04-27 13:29:56

'有点冒险 - 只有当你处于文档范围时才会起作用，因为在这种情况下'this'指向'document'。所以当你在那里使用'document'时它会更好 - 所以它会一直工作，不管你放在这行代码的范围内。 – 2012-04-27 13:41:21

正如以前的海报说，该元件被重新使指针的点击功能不听的fancybox内的元素。

但是不要使用live，它已被弃用。你想要的是将clickevent绑定到一个永远存在的元素上，比如说你的fancybox有一个名为#container的div容器，这就是你应该如何编写你的代码。

$('#container').on('click', '#foo', function() { 
    // code goes here. 
});

你只需在你想要的确切的元素中插入.on（）函数，就像我上面做的那样。

来源

2012-04-27 12:51:03 ninja

在div上尝试了各种变体，没有任何工作，但随后使用'this'它突然生效：'$（this）.on（'click'，'#foo'，function（）{alert（'hello world'）） ;}）;' – hawbsl 2012-04-27 13:29:26

我不能在我的FancyZoom弹出窗口中使用JQuery吗？

回答

相关问题