jQuery:是否有一种方法可以自动添加属性到动态生成的HTML中,就像live()处理事件一样

jQuery: Is there a way to automatically add attributes to dynamically generated HTML, in the same way that live() works with events?

本文关键字:HTML 动态 就像 一样 处理事件 live 添加 一种 是否 方法 jQuery      更新时间:2023-09-26

我有一个如下列表:

<ul id="links">
    <li><a href="/example-url-1">Link 1</a></li>
    <li><a href="/example-url-2">Link 2</a></li>
    <li><a href="/example-url-3">Link 3</a></li>
</ul>

我添加一个target属性到每个链接使用jQuery,因为我不想改变服务器端HTML输出;它在许多其他地方使用,这是唯一一个链接应该具有此属性的实例。

$('#links a').attr('target', '_top');

问题是,新的链接是动态附加到这个列表客户端,也使用jQuery;当它们是时,它们显然缺少target属性,所以我最终得到这样的东西:

<ul id="links">
    <li><a href="/example-url-1" target="_top">Link 1</a></li>
    <li><a href="/example-url-2" target="_top">Link 2</a></li>
    <li><a href="/example-url-3" target="_top">Link 3</a></li>
    <li><a href="/example-url-4">Link 4</a></li>
</ul>

我不能改变jQuery脚本追加的链接,以包括属性,所以我的问题是:我知道我可以使用live()自动设置事件处理程序动态生成的元素,但是否有一种方法自动添加属性添加到任何新元素?

我认为没有办法做到你所要求的。但是你可以使用live来完成同样的事情:

$('#links a').live("click", function(e) {
   $(this).attr('target', '_top');
});

如果你不反对插件,你可以看看livequery,它会完成你想要的。

下面是一个例子:

$("#links a").livequery(function () {
    $(this).prop("target", "_top");
}); 
http://jsfiddle.net/vRF3G/

您可能想看看jQuery的特殊事件系统。它允许您创建自定义的特殊事件,当满足特定条件时触发。

这是另一个带有"onContentChange"事件的SO线程:为内容更改创建一个jQuery特殊事件

这是另一篇关于jQuery自定义特殊事件的文章:http://benalman.com/news/2010/03/jquery-special-events/

这是一个糟糕的解决方案:

$("#links a").live("mouseover", function() { $(this).attr("target","_top"); });

如果不把鼠标放在上面就不能点击它,target属性在需要它之前已经设置好了