代码之家  ›  专栏  ›  技术社区  ›  Brandon

使DIV中的所有链接调用相同的函数?

  •  0
  • Brandon  · 技术社区  · 14 年前

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

    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,那么它将调用disclose(),将其标记为正在数据库中读取。

    问题是,如果消息本身包含到另一个页面或外部站点的链接,那么我还希望在用户离开页面之前调用disclose()。是否仍要更改此javascript以获取所有 a 元素(x和任何可能出现在消息中的链接)并更改onclick以调用函数?

    2 回复  |  直到 14 年前
        1
  •  1
  •   Nick Craver    14 年前

    您可以重新排列代码并使用 .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(html,props) 在jquery 1.4中添加,使创建更清晰(更快!文档片段缓存!)。它所做的不是将onclick附加到x,而是监听来自 任何 <a> 在DIV中,当它冒泡时,它执行的代码与只在 <a href="#">X</a> 锚定。

        2
  •  1
  •   BalusC    14 年前

    代码示例有点含糊,这是在哪里进行的 o 来自哪里?它是全局的还是特定于DIV的?

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

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

    只需在onload期间执行一次。