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

我们正在使用FancyZoom在屏幕上生成标准的javascript弹出效果。

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

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

如果我们将bar.png放在弹出窗口之外，它会在我们点击它时按预期响应：

    $(document).ready(function() { $('#foo').on({ 'click': function() { alert('hello world'); } }); });    test 
 
 this is some text in the popup
 
   $('#myFancyZoomPopup').fancyZoom({ directory: 'i'});   

但是如果我们把它放在我们想要的地方 – 在FancyZoom弹出面板中 – 就像这样，我们的警报不会触发：

    $(document).ready(function() { $('#foo').on({ 'click': function() { alert('hello world'); } }); });    test 
 
 this is some text in the popup
  
  $('#myFancyZoomPopup').fancyZoom({ directory: 'i'});   

结果：点击金色矩形时没有“hello world”。

Answer 1

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

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

 $(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/

Answer 2

正如之前的海报所说，元素被重新创建，因此click-function的指针不会侦听fancybox中的元素。

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

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

你只需要像我上面那样坚持你想要在.on（）函数中听到的确切元素。