Question

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

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

（在下面的代码示例中，我用简单的alert替换了所有的.attr内容，只是为了说明这一点.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>

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

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

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

Answer 2

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

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

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

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

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

2 个答案: