javascript - 访问 DOM 动态添加、getScript、ajax

Question

我使用 jQuery ajax 动态读取页面上的上下文。但是 DOM 的一部分是在 ajax.done 中通过 getScript 调用的 javaScript 函数加载的。但是就在我加载新内容之后，我需要按类获取元素并在下一个函数中使用它。不幸的是，我无法找到我在 javaScript 函数中创建的元素，以及我使用 jQuery getScript 调用的具有该函数的脚本。

好的，我的代码:

$(document).ready(function() {
    $('.link').click(function(){
      var subpage = $(this).attr('data-subpage');
      var src = 'subpages/'+ subpage + '/' + subpage +'.php';
      var script = 'subpages/'+ subpage + '/js/' + subpage +'.js';

      $.ajax({
          url: src,
          context: document.body,
          dataType: 'html',
          success: function(responseText){
              $('#text').html(responseText); // responseText has only container <div id="insideText"></div> that I use in one function and load there by html() several divs. One of this div has class 'translate'. I need it in function Translator
            }
      })
        .done(function(){
          $.getScript(script); // here I call script where I load several divs to #insideText
          Translator($('.active').attr('data-lang')).getTranslation() // part of function have to find all div.translate, but can't find it if they're load in script call in getScript. And this is a problem.
        })
    })
  })

我希望我能把我的问题解释清楚。如果没有，请询​​问，我会再试一次。

有什么方法可以做到吗？

//更新//

在这个脚本之后，通过 getScript 调用我仍然对第二个“完成”有问题:

  const Presenter = function(){
    var presented, show, fullDesc, cont;

    presented = [
      {
      url: 'demo/colorsGame/',
      name: 'Graj w kolorki!',
      desc: 'Graj w kolorki! Wybierz taki sam kolor, w jakim napisana jest nazwa wylosowanego koloru. Spiesz się, czas ucieka coraz szybciej i szybciej. Uważaj, bo mózg może cię oszukać i uznać za ważniejsze to, co jest napisane, a nie to co widzisz. Zobacz ile punktów jesteś w stanie zdobyć zanim popełnisz trzy błędy. Ćwicz swoją koncentrację.'
    },
    {
      url: 'demo/sampleUserProfile/',
      name: 'Sample User Profil',
      desc: 'Mała próbka możliwości reactJS. Wkonany z użyciem biblioteki reactJS, menadzera pakietów webpack oraz na środowisku nodeJS przykładowy profil użytkownika. Like-uj i obserwuj do woli, a jeśli chcesz, wypowiedz się pod profilem.'
    }
  ];

    show = function(url, desc, name) {
      fullDesc =
        "<a href ='" + url + "'>" +
          "<h1 class='translate'>" + name + "</h1>" +
        "</a>" +
        "<div>" +
          "<p class='translate'>" + desc + "</p>" +
        "</div>";

      cont =
        "<div id='webmin' class='clearfix'>" +
          "<div>" +
            fullDesc +
          "</div>" +
          "<div>" +
            "<iframe src='" + url + "' scrolling='no'>" +
              "ups, twoja przeglądarka nie obsługuje ramek" +
            "</iframe>" +
          "</div>"+
        "</div>";

      return cont;
    };

    return {
      show: show,
      presented: presented
    }
  };

  display = function(){
    var len, url, name, desc;

    len = Presenter().presented.length;

    for(let i = 0; i <= len; i++){
      url = Presenter().presented[i].url;
      name = Presenter().presented[i].name;
      desc = Presenter().presented[i].desc;

      $('#insidetext.apps').append(Presenter().show(url, desc, name));
    }
  };
  display();

嗯，我在想，如果 iframe 在这里不是问题？并且不要让脚本完成结束？

Answer 1

getScript 只是另一个 ajax 调用并返回一个 xhr 对象，该对象公开 done 和 fail 方法。在尝试访问之前，使用这些方法确保您的 dom 已正确加载。

$(document).ready(function() {
    $('.link').click(function(){
      var subpage = $(this).attr('data-subpage');
      var src = 'subpages/'+ subpage + '/' + subpage +'.php';
      var script = 'subpages/'+ subpage + '/js/' + subpage +'.js';

      $.ajax({
          url: src,
          context: document.body,
          dataType: 'html'
      })
        .done(function(responseText){
             $('#text').html(responseText); 
             $.getScript(script).done(function() {
                 Translator($('.active').attr('data-lang')).getTranslation() ;
             }
        })
    })
})

此外，您应该实现 .fail 方法，以防您的 ajax 请求失败。