javascript - jquery调用实际存在的null元素

Question

我的代码可以在本地主机上运行，​​但是当我在我的网站上实现它时，它就不行了。错误日志显示它正在调用一个不存在的元素。我得出的结论是，它看不到该元素，因为该元素是动态加载的。

该元素是类.newsitem_text，它是一个包含博客文章的div。我相信 jquery 在页面加载类之前调用​​该类。

这是一个 fiddle 示例: http://jsfiddle.net/ku6L240c

错误:未捕获类型错误:无法读取 null 的属性“html”
47-ganhe-dinheiro-atraves-de-downloads:1093 未捕获的语法错误:意外的 token 非法

代码:

<javascript>
            var wordList = $(".newsitem_text").html().split(' ');
            var newHtml = '';

            $.each(wordList, function(index, word){
              newHtml += ' ' + word;
              if (index == 50) {
                newHtml += '<div>Some HTML</div>'     
              }        
            })
            ;

            $(".newsitem_text").html(newHtml);


</javascript>

如何让脚本等到页面加载类，然后执行它或其他什么？

Answer 1

似乎您正在 JS 代码中执行动态 HTML，并立即尝试获取刚刚添加的标签。如果是这种情况，您的代码将必须等待并继续检查，直到浏览器呈现您的新 HTML 并将节点添加到 DOM，然后您可以查询它们或执行某些操作。

我发现有效的唯一方法是使用 int setTimeOut 并继续检查然后执行最后一条语句。我在下面创建一个函数来检查等待并检查特定条件，然后执行回调函数。

//A function to wait until either times up, or until a pass in "funct" returns "true", which ever occured first.
//funct - callback function, to be returned true or false.
//done - an optional callback function for notify when waiting is over.
//timeout - the amount of time in million-second to wait.
//caller - optional string of caller for monitoring if multiple waiting session.
function waitToSync(funct, done, timeout, caller) {
  //This is  a hack synchronize to wait until funct() returns true or timeout becomes < 0.
  caller = caller || '';
  if ((funct === undefined) || typeof (funct) != 'function') return;
  function waiting() {
    if (!funct()) {
      var dt = new Date();
      console.log(caller + " waiting: " + dt.format('yyyy-mm-dd h:MM:ss'));
      if ((timeout - 1000) > 0)
        setTimeout(waiting, 1000); //1 second.
      else {

        console.log(caller + ': waitToSync timed out!!!');
        document.body.style.cursor = 'default';
      }
      timeout -= 1000;
    }
    else {
      if (done !== undefined && (typeof done === 'function'))
        done();
    }
  }
  waiting();
}

做所有你动态或任何想要等待的事情。然后调用WaitToSync

 $.each(wordList, function(index, word){
     newHtml += ' ' + word;
     if (index == 50) {
        newHtml += '<div>Some HTML</div>'     
     }        
  });

  waitToSync(
     function wait() { return document.getElementsByClassName("newsitem_text").length > 0; }, 
     function dosomething() { $(".newsitem_text").html(newHtml); },
     10000, //wait up to 10 seconds.
     'dynamic add HTML');