4

这是我的链接:

http://tinyurl.com/6j727e

如果单击 test.php 中的链接,它将在使用 jquery 'facebox' 脚本的模式框中打开。

我试图对这个框中的点击事件采取行动,如果你查看 test.php 的源代码,你会看到我试图在模式框中找到链接的位置。

    $('#facebox .hero-link').click(alert('click!'));

但是,它没有检测到点击,而且奇怪的是,点击事件在页面加载时运行。

然而,关闭按钮确实有一个内置的点击事件来关闭盒子,我怀疑我的本土点击事件被某种方式阻止了,但我无法弄清楚。

任何人都可以帮忙吗?通常它是项目的最后一部分,它一直在阻碍我,就像往常一样;)

4

2 回答 2

9

首先,您在文档加载时收到警报的原因是该#click方法将函数作为参数。相反,您将返回值传递给它alert,它会立即显示警报对话框并返回 null。

事件绑定不起作用的原因是因为在文档加载时#facebox .hero-link还不存在。我认为您有两个选项可以帮助您解决此问题。

选项1)仅在显示facebox后才绑定click事件。就像是:

$(document).bind('reveal.facebox', function() {
  $('#facebox .hero-link').click(function() { alert('click!'); });
});

选项 2) 考虑使用jQuery Live Query 插件

Live Query 通过绑定事件或自动触发匹配元素的回调来利用 jQuery 选择器的强大功能,即使在页面加载和 DOM 更新之后也是如此。

jQuery Live Query 在识别到 Facebox 修改了 DOM 时会自动绑定 click 事件。然后你应该只需要写这个:

$('#facebox .hero-link').click(function() { alert('click!'); });
于 2008-12-08T17:47:20.207 回答
1

或者使用事件委托

这基本上将事件挂钩到容器而不是每个元素,并在容器事件中查询 event.target。

它有很多好处,因为您可以减少代码噪音(无需重新绑定),而且浏览器内存更容易(dom 中绑定的事件更少)

快速示例在这里

用于轻松事件委托的jQuery 插件

PS 事件委托预计将在即将推出的下一个版本 (1.3) 中出现。

于 2008-12-08T19:14:44.147 回答