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之前正确加载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() ;
             }
        })
    })
})

另外，如果你的ajax请求失败，你应该实现.fail方法。

访问DOM添加dynamiclly，getScript，ajax

1 个答案: