Question

我在页面中包含了第三方的一些JavaScript。这会在页面加载后的某个时间向页面添加以下元素：

<a class="foo">some link</a>

我需要确保将其更改为：

<a class="bar">some link</a>

将元素添加到页面后尽快。我尝试将以下内容添加到JQuery就绪处理程序

$('a.gullSearchBtn').removeClass('gullSearchBtn').addClass('roundButton');

但是这会在添加元素之前执行，因此不起作用。我在网上搜索过，似乎被称为“livequery”的jQuery功能可能是我问题的解决方案，但我似乎无法让它工作。

Answer 1

你可以只使用原生样式并使用setTimeout函数来检查它是否退出。但这只有在你有一种识别该元素的独特方式时才有效：例如：它是foo类的唯一锚元素

我的推荐循环

$(document).ready(function(){
    checkTimer();
});

function checkTimer(){
    var ele = $('a.foo');
    if(ele.length == 0){
        setTimeout(function(){
            checkTimer();
        },100);
    }
    else {
        ele.attr('class','bar');
    }
}

有人会建议你使用setInterval（），它提供与上面循环相同的功能。我从个人经验中知道这是多么容易破坏，但这是该版本的代码。

setInterval（）循环

var timer;
$(document).ready(function(){
    timer = setInterval(function(){
        checkTimer();
    },100);
});

function checkTimer(){
    var ele = $('a.foo');
    if(ele.length != 0){
        ele.attr('class','bar');
        clearTimeout(timer)
    }
}

Answer 2

绑定到DOMNodeInserted或DOMSubtreeModified可能有助于实现此目的。但根据以下帖子，这将不适用于IE

How to detect new element creation in jQuery?

Answer 3

demo：http://so.devilmaycode.it/change-css-classes-of-element-added-to-dom-at-runtime

        $(function() {
            $('.foo').click(function(e) {
                $('body').append('<p class="gullSearchBtn">text</p>');
                return false;
            });

            setInterval(function() {
                if ($('.gullSearchBtn').length)
                    $('.gullSearchBtn').removeClass('gullSearchBtn').addClass('roundButton');
                    //clearInterval() optional if you don't need to loop anymore...
            }, 100);
        });

Answer 4

你考虑过这个吗？

原始CSS

.roundButton {
   [your rules]
}

更改了CSS

.gullSearchBtn, .roundButton {
   [your rules]
}

在运行时更改添加到DOM的元素的css类

4 个答案: