我不能在我的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嗎？

回答

相關問題