如何检测动态添加的CSS类

Question

我有一个html元素，在加载主页一段时间后，我们在其中动态添加了一个CSS类。 当我尝试在JQuery中检测此元素是否具有添加的类时， hasClass方法返回false。我建议这是因为该元素已被动态添加。

我的代码已插入$(document).ready(function() {}); 。

使用Javascript：

!$('#travel-1_1_').hasClass('complete');

HTML：

<rect id="travel-1_1_" width="64" height="12.6" y="28.5" x="48" class="complete"></rect>

Answer 1

您需要使函数在页面加载后的间隔内运行。 这是一个选择：

function fn60sec() {
// runs every 60 sec and runs on init.
$('#travel-1_1_').hasClass('complete');
}
fn60sec();
setInterval(fn60sec, 60*1000);

Answer 2

您可能需要在设置类的同一位置进行检查，以确保仅在之后执行

Answer 3

您在哪里检查该类是否存在？

根据这个答案，您应该可以在$(document).ready()函数中进行检查。

Answer 4

我的第一个建议是在添加类时仅调用所需的任何函数。 在您不控制添加类的代码的情况下，尽管我认为最好的方法是设置一个Interval侦听器。

var classListener = setInterval(function(){
    if($('#travel-1_1_').hasClass('complete')){
        clearInterval(classListener);
        //Do your work here or
        doWorkFunctionCall();
    }
}, 1000);

间隔的单位是毫秒，因此它将每秒运行一次。 如果您希望它花费更长的时间，只需将其乘以您希望它在检查之前等待的秒数即可。 此解决方案的优点是，一旦发现元素具有类，它将停止运行。