使div内的所有链接调用相同的函数?

时间:2010-04-20 01:17:48

标签: javascript jquery

我正在尝试制作一个显示警报的通知区域。

return this.each(function() {
  jQuery('<div class="' + o['className'] + '">' + o.msg + ' +
         '<a href="#" onclick="$(this).parent().remove(); dismiss(' + o["id"] + ');">X</a>' + '</div>')
    .appendTo(this);
});

这只是从数据库中提取消息,并将其显示给用户。如果用户单击X,则它将调用dismiss(),这将标记为在数据库中读取。

问题是,如果邮件本身包含指向另一个页面或外部站点的链接,我还想在用户离开页面之前调用dismiss()。有没有改变这个javascript来采取所有a元素(X和消息中出现的任何链接)并更改onclick以调用该函数?

2 个答案:

答案 0 :(得分:1)

代码示例有点模糊,这个o来自哪里?它是全局的还是div特定的?

无论如何,您可能会发现jQuery.live()对此有用。初始化后,它将应用于与选择器匹配的所有未来新元素。您只需要有一些父元素,它将包含所有带有消息和链接的div。

$('#someDivId a').live('click', function() {
    // Do your thing here as you did in `onclick` attribute.
};

在onload期间执行一次。

答案 1 :(得分:1)

您可以稍微重新排列代码并使用.delegate(),如下所示:

return this.each(function() {
  var id = o["id"];
  jQuery('<div />', { 'class': o['className'], html: o.msg })
   .append('<a href="#">X</a>')
   .delegate('a','click', function() { $(this).parent().remove(); dismiss(id); })
   .appendTo(this);
});

这使用jQuery 1.4中添加的新jQuery(html,props)来使创建更清晰(更快!文档片段缓存!)。它正在做的是不是将onclick附加到X上,它正在侦听来自div中任何 <a>的点击,当它冒泡时,它会执行与以前相同的代码在<a href="#">X</a>锚点上。