首先,如果这是重复的话,我只想对不起-我发现了类似的问题,但没有解决特定问题的解决方案。

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

$("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]);
});

最佳答案

在您的情况下,最好使用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

关于javascript - 由脚本创建的元素未被其他脚本识别,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/35461176/

10-12 12:27
查看更多