javascript - 脚本创建的元素无法被另一个脚本识别

Question

首先，如果这是重复的，我只想说抱歉 - 我发现了类似的问题，但没有适用于我的特定问题的解决方案。

所以，我最近完成了一个脚本，它从 xml 文件读取数据并将其添加到 html 页面。该脚本的工作方式是查找具有特定标签名称的节点，并为每个节点添加 <div>。到html页面的<main>使用jQuery's append() function .

$("main").append("<div></div>");

我有另一个脚本应该找到所有 <div>位于<main>并将它们放入一个数组中:

$(window).load(function() {
   var divs = $("main > div").toArray();
}

我的问题是这个函数无法识别这些新创建的 div，因此我的脚本的其余部分不起作用。我的猜测是最后一个脚本运行得太快，因此找不到任何 div(脚本必须自动运行 - 我没有任何可以激活该功能的按钮)。

解决这个问题的最佳方法是什么？非常感谢任何帮助!

编辑:为了让事情更清楚，我将添加我认为相关的所有代码(用瑞典语注释，抱歉!):XML 到 HTML 转换器:

$( document ).ready(function() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
      if (xhttp.readyState == 4 && xhttp.status == 200) {
      myFunction(xhttp);
      }
  };
  xhttp.open("GET", "BlackBox/contents.xml", true);
  xhttp.send();

  function myFunction(xml) {
    var xmlDoc = xml.responseXML;
    var xmlNodes = xmlDoc.documentElement.getElementsByTagName("*"); // Guidens noder
    // Loopa igenom alla noder i XML-filen
    for(var i = 0; i < xmlNodes.length; i++) {
      // Lägg alla nuvarande divs under main i en array
      var divs = $("main > div").toArray();
      // Senast tillagda <div>
      var currentDiv = divs[divs.length-1];
      if(xmlNodes[i].tagName == "section") {
        // Noden är en <section> -> Vi ska göra en div i main
        $("main").append("<div></div>");
      } else if(xmlNodes[i].tagName == "name") {
        // Noden är en <name> -> Vi ska göra en ny länk i <nav> & ge senaste <div> ett id
        if(xmlNodes[i].parentNode.tagName == "section") {
          // Vi ska göra en vanlig länk och ge en div ett id
          $("nav > ol").append("<li><a href='#" + $(xmlNodes[i].firstChild.nodeValue) + "'>" + xmlNodes[i].firstChild.nodeValue + "</a></li>");
          $(currentDiv).id = xmlNodes[i].firstChild.nodeValue;
        } else {
          // Vi ska göra en länk i en redan skapad ul och ge en <li> ett id
          $("nav > ol > ul").last().append("<li><a href='#" + $(xmlNodes[i].firstChild.nodeValue) + "'>" + xmlNodes[i].firstChild.nodeValue + "</a></li>");
          $("main > div > ul > li").last().id = xmlNodes[i].firstChild.nodeValue;
        }
      } else if(xmlNodes[i].tagName == "header") {
        // Noden är en <header> -> Vi ska lägga till en header (h1 om det är den första, annars h2)
        if(xmlNodes[i].parentNode.tagName == "section") {
          // Nodens parent är en <section>
          if(divs.indexOf(currentDiv) == 0) {
            $(currentDiv).append("<h1>" + xmlNodes[i].firstChild.nodeValue + "</h1>");
          } else {
            $(currentDiv).append("<h2>" + xmlNodes[i].firstChild.nodeValue + "</h2>");
          }
        } else {
          // Nodens parent är en <sub> - innehållet ska hamna i den senast skapande <li>-taggen och vara h3.
          $("main > div > ul > li").last().append("<h3>" + xmlNodes[i].firstChild.nodeValue + "</h3>");
        }
      } else if(xmlNodes[i].tagName == "text") {
        // Noden är en <text> -> Vi ska lägga till text i <div>
        if(xmlNodes[i].parentNode.tagName == "section") {
          // Nodens parent är en <section>
          $(currentDiv).append("<p>" + xmlNodes[i].firstChild.nodeValue + "</p>");
        } else {
          // Nodens parent är en <sub> - innehållet ska hamna i den senast skapande <li>-taggen och vara h3.
          $("main > div > ul > li").last().append("<p>" + xmlNodes[i].firstChild.nodeValue + "</p>");
        }
      } else if(xmlNodes[i].tagName == "sub"){
        // Vi ska lägga till en <ul> i <nav> och currentDiv
        $("nav > ol").append("<ul></ul>");
        $(currentDiv).append("<ul><li></li></ul>");
      }
    }
  }
});

应该使用新创建的div的函数:

// window load används för att funktionen ska köras när allt annat är klart
$.when(
  $.getScript("/js/xmltoguide.js"),
  $.Deferred(function(deferred) {
    $(deferred.resolve);
  })
).done(function() {
  // Spara alla divnamn som man ska kunna klicka sig till
  var divs = $("main > div").toArray();
    alert(divs[1]);
  // Lägg till klassen current på första länken (den är alltid den man startar på)
  $("a[href$='#" + divs[0].id + "']").addClass("current");
  $(window).scroll(function() {
    // Om divvens avstånd till toppen är tillräckligt litet får dess länk klassen current
    // Villkoret anger godkänns om skillnaden är -1. Det beror på länkarna som leder till divvarna i nav.
    for (var i = 0; i < divs.length; i++) {
      if ($(window).scrollTop() - $("#" + divs[i].id).offset().top > -1) {
        $(".current").removeClass("current");
        $("a[href$='#" + divs[i].id + "']").addClass("current");
      }
    }
    // Om man har skrollat längst ner ska sista länken automatiskt få klassen "selected"
    if ($(window).scrollTop() + $(window).height() == $(document).height()) {
      $(".current").removeClass("current");
      $("a[href$='#" + (divs[divs.length - 1].id) + "']").addClass("current");
    }

  });

  // Gör så att när man klickar på länkar som länkar till divvar animeras sidan
  $(document).on('click', 'a[href^="#"]', function(e) {

    // förhindra standardnavigation om man klickar på länk till div
    e.preventDefault();

    // målelements id
    var id = $(this).attr('href');

    // målelement
    var $id = $(id);
    if ($id.length === 0) { // === betyder att de måste ha samma värde och värdestyp
      return;
    }

    // topposition relativt till dokumentet
    var pos = $(id).offset().top;

    // animera scroll
    $('body, html').animate({
      scrollTop: pos
    });

  });

  $("#toggleHeader").funcToggle('click', function() {
    $("header").animate({
      left: "-=250px"
    });
    $(this).animate({
      left: "-=250px"
    });
    $("main, footer").animate({
      marginLeft: "-=250px"
    });
  }, function() {
    $("header").animate({
      left: "+=250px"
    });
    $(this).animate({
      left: "+=250px"
    });
    $("main, footer").animate({
      marginLeft: "+=250px"
    });
  });
  alert(divs[0]);
});

Answer 1

在你的情况下，你最好使用 promise 和 deferred objects 确保第一个脚本已加载，以便您可以调用第二个脚本:

$.when(
    $.getScript( "/mypath/myscript1.js" ),
    $.Deferred(function( deferred ){
        $( deferred.resolve );
    })
).done(function(){

    //place your code here, the scripts are all loaded
    var divs = $("#main > div").toArray();

});

还要确保为 main 使用适当的选择器，我认为它是一个 id，因此请使用 #main。