javascript - js 代码在开发人员工具中运行良好，但在 js 文件中运行不正常

Question

我可以从我的开发者控制台运行以下代码:

  jQuery(".skiptranslate").contents().filter(function () {
        alert('works again');
        return this.nodeType != 1;
    }).replaceWith("");

但是当我将同样的代码放入 js 文件时，它没有任何效果。我将这段代码放在 $(document).ready() 函数内的 js 文件中。我的代码有什么问题？

Answer 1

您可以使用 $('.skiptranslate').length 创建一个递归函数来检查 skiptranslate 是否准备好(呈现/加载)。如果找到就运行你的代码，如果没有，等待 100 毫秒然后调用你自己(再做一次检查)，继续检查直到找到元素。

使用setTimeout设置延迟，我这里的例子是100ms。

不要忘记第一次初始化函数 skiptranslateFn();

我这里的例子模拟了在 1 秒(1000 毫秒)后添加的类 skiptranslate。

$(document).ready(function() {
  function skiptranslateFn() {
    if ($('.skiptranslate').length) {
      jQuery(".skiptranslate").contents().filter(function() {
        alert('works again');
        return this.nodeType != 1;
      }).replaceWith("");
      console.log('---skiptranslate FOUNDED! ----');
    } else {
      console.log('skiptranslate not found yet');
      setTimeout(function() {
        skiptranslateFn()
      }, 100);
    }
  }
  //init
  skiptranslateFn();

  setTimeout(function() {
    $('#test').addClass('skiptranslate');
    console.log('element loaded!');
  }, 1000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test">
  test div
</div>