javascript - 自动给动态添加的html元素添加属性

Question

我需要将 dir=auto 添加到多个 ul 元素中，这些元素在多个事件发生时动态添加。

由于这些事件不在我的控制范围内(有些是插件，有些是ajax结果等)我不想零星地添加一行代码

我如何添加 $("ul").attr("dir","auto") 以便任何相关元素在添加到页面后都具有属性？

Answer 1

如果我理解正确，您需要向文档/dom 添加一个监听器以了解一旦动态添加了 <ul>，然后在加载 之后检查 <ul> 是否也被修改(以添加其他他们的属性？)。

一旦 <ul> 被修改或被添加到文档中，监听器应该工作，然后过滤/选择 <ul> 并应用您的 .attr 函数。 Check this 和 this

我已经在我的控制台上测试了这个 SO 页面的代码，它似乎可以正常工作。我正在使用 FF26，因此这样的事情可能会有所帮助:

    //listen to parent to know if it's being modified. you can listen to <ul> if you want to check if it has modified if you want to do something with <li> for example. 
    $("#parentDiv").bind("DOMSubtreeModified", function() {
       //your code here       
        $("ul").attr("dir","auto");// to all <ul> in the page
        //or only filter ul that belongs to this div
       // this.find("ul").attr("dir","auto");
    });

我认为 this 答案有更准确的发现，因为 ( DOMSubtreeModified ) 似乎已被弃用(尽管它运行良好)。

如果稍后(未知时间)添加 <ul>，那么在我看来，您有两个选择:

1. 将监听器添加到 body 或包含 <ul> 的父 div，并在添加 <ul> 时进行监控，然后应用您的 attr。
2. 添加一个 setInterval 以保持每隔 几秒检查页面中是否有任何 <ul>？

我更喜欢选项 1，因为我读过选项 2(使用 setInterval )可能会增加一些开销。 Ref.。