2

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

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

（在下面的代码示例中，为了说明这一点，我将所有 .attr 内容替换为一个简单的内容alert 。Bar.png 是一个金色矩形，单击时应显示 Hello World。单击“测试”会显示狂热的弹出窗口。 )

如果我们像这样将 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>

在此处输入图像描述

但是如果我们把它放在我们想要的地方——在 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>

在此处输入图像描述

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

4

2 回答 2

1

正如之前的海报所说，该元素被重新创建，因此点击功能的指针不会监听花式框内的元素。

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

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

您只需在 .on() 函数中插入您想要监听的确切元素，就像我在上面所做的那样。

于 2012-04-27T12:51:03.650 回答
1

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

尝试使用“实时”版本，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-27T12:16:06.753 回答