更改某些锚标记的行为,即使动态添加也是如此

时间:2014-04-08 21:02:27

标签: javascript jquery events

在网络项目中,需要在某种覆盖窗口中打开一些链接,而其他链接窗口则应该正常打开。

链接始终作为普通的锚标记,可以......

  • 作为固定内容添加到模板中
  • 由版主使用html编辑器添加,例如tinyMCE

我花了相当多的时间考虑什么是安全,适当,相当交叉浏览器兼容和优雅的机制。我最后的想法是在名为a的{​​{1}} - 标签上使用一个类,只需强制主持人将这个类添加到链接中,如果他们创建了他们想要在重叠窗口中打开的链接。

这一切都很好。现在我可以做这样的事情:

overlayWindow

大。但有一个问题。锚标签也可以

  • 动态提供,甚至在页面加载后添加到页面

这意味着我需要一些安全的方法来确保只要向页面添加任何其他锚标记(无论何种方式),就会执行上述代码。

由于这似乎相当遥远,我还可以使用一种解决方案来拦截所有ajax请求,并确保只要ajax调用完成就会执行准备代码。

可以这样做吗?如果是,怎么样?

(我对完全不同的方法解决我的实际问题也很开放,所以欢迎任何建议。)

1 个答案:

答案 0 :(得分:1)

实现此目标的标准方法是使用event delegation.所有点击事件将通过DOM中的祖先元素“冒泡”,并且可以通过点击任何一个祖先元素来截取。

因此,在事件名称和回调函数之间的.on函数中再添加一个参数 - 将被点击元素的选择器放在那里。现在,在容器对象上调用jquery $(),该对象在冒泡到容器时侦听点击。

例如,如果你确定所有这些链接都放在某个级别里面,比如说任何带有'containerClassName'类的div应用于它们,你确定这样的容器div总是出现在页面加载,然后:

$('.containerClassName').on('click', 'a.overlayWindow', function(event){ ... //etc.

确保当他们的点击次数达到overlayWindow时,所有.containerClassName个链接都会被“听到”。然后可以正确处理事件,并使用您提供的回调,并使用代表this链接的a.overlayWindow