Question

我在这里遇到的问题有点棘手，我试图将addClass的简单JQuery代码行应用于div class pop-up } 但问题是在pop_up

之后无法访问课程jQuery(document).ready(function($){});

此类实际上是从外部JS和pop_up功能添加的也是从外部JS添加的，所以我想知道

如何在外部JS执行后使用JQuery添加类，以便可以使用以下命令找到pop_up类：

$('.pop_up');

我尝试过的事情：

jQuery(document).ready(function($) {
    $('.pop_up').addClass('importantRule');
    $('.pop_up').toggleClass('importantRule');
});

这不起作用，因为外部JS在.ready之后以某种方式添加了该类，因此如果您尝试打印$('.pop_up')，它将是未定义的。

我还尝试使用div.pop_up这样的常量类容器来查找类：

$('div.element').find('.pop_up').addClass('importantRule');

那也没有用，我知道问题在于调用.ready中的函数作为外部JS之后如何执行，

在这附近吗？

如果没有，有没有办法检测所有外部JS文件是否已准备好并加载？

Answer 1

您可以在页面中多次使用$（document）.ready（）。代码按照它出现的顺序运行。

您可以对代码使用$(window).load()事件，因为在页面完全加载并且各种$(document).ready()处理程序中的所有代码都已完成运行后会发生这种情况。

$(window).load(function(){
  //your code here
});

Answer 2

一种方法是使用setTimeout来检查： -

function checkForElement() {

  setTimeout(function() {

    if ($('.pop_up').length) {
      $('.pop_up').addClass('importantRule');
    } else {
      checkForElement();
    }

  }, 100);

}

checkForElement();

这将等待100ms，然后检查。如果它不存在那么它将再次等待，等等。

Answer 3

您遇到了竞争条件。如果外部脚本首先运行，那么您的代码将会正常工作，但如果您的代码首先完成，那么它就会中断。

您可以像Satej S在评论中建议的那样破解它，并给出合理的超时，以确保外部脚本完成运行，并在超时后运行您的脚本。

setTimeout(function(){ doSomething(); }, 3000);

更好的解决方案是使用外部脚本的回调（您可以编辑外部脚本吗？）。这样，第二个外部脚本结束，它会调用一个将开始工作的内部函数。

Answer 4

为避免大多数其他答案提出的超时，我建议您尝试添加＆＃34;延迟＆＃34;标记到您的脚本包括。这样剧本试图添加类＆＃34; importantRule＆＃34;将等到所有其他脚本都已加载并执行。

Answer 5

另外，我发现这个问题非常相似 load and execute order of scripts

希望这有帮助！感谢

在外部JS执行后加载JavaScript

5 个答案: