Javascript 滑动JS无法处理已填充的内容

我用的是刷卡JS2。 如果我自己制作HTML结构，它会工作得很好，但是如果我用来自jQuery的内容填充HTML，它会在第二张幻灯片上停止

我的HTML结构：

<div id="map" class="swipe">
    <div class="swipe-wrap">
        <div class="city" id="current">
            <div class="location">Current Location</div>
        </div>
    </div>
</div>
<nav>
    <ul id="position">
        <li class="on">Current location</li>
    </ul>
</nav>

当前位置

当前位置

这是我在jQuery上的结构

$.getJSON("http://localhost/locations.php", function(localdata) {
    $.each(localdata.locations, function(i, geolocal){
        var vcountry = geolocal['country'];
        var vregion = geolocal['region'];
        var vcity = geolocal['city'];

        country = vcountry.replace(' ','_');
        region = vregion.replace(' ','_');
        city = vcity.replace(' ','_');

        // THE PROBLEM IS HERE. IF I USE AJAX OR GETJSON HERE INSIDE THE OTHER GETJSON, THE SWIPE IS BROKEN.
        $.ajax({
            type: "GET",
            url: "http://localhost/remotexml.php?url=http://www.yr.no/place/"+ country +"/"+ region +"/"+ city +"/forecast.xml",
            success: function(xml) {
                var localName = $(xml).find('location name').text();
                $('#map div.swipe-wrap .city:last-child').after('\n<div class="city">\n<div class="location">'+localName+'</div>\n</div>\n</div>');
                $('#position').append('\n<li>'+localName+'</li>');
            }
        });

    });
})
.success(function() { })
.error(function() { })
.complete(function() {
    var slider = 
      Swipe(document.getElementById('map'), {
        auto: 5000,
        continuous: true,
        callback: function(pos) {

          var i = bullets.length;
          while (i--) {
            bullets[i].className = ' ';
          }
          bullets[pos].className = 'on';

        }
      });

    var bullets = document.getElementById('position').getElementsByTagName('li');
});

$.getJSON（“http://localhost/locations.php，函数（localdata）{
$.each（localdata.locations，function（i，geolocal）{
var vcountry=地理位置[“国家]；
var vregion=地理局部[“区域]；
var vcity=geolocal[“城市]；
国家=国家。替换（“”，“”）；
区域=区域。替换（“”，“”）；
城市=城市。替换（“”，“”）；
//问题就在这里。如果我在另一个GETJSON中使用AJAX或GETJSON，那么滑动就会中断。
$.ajax({
键入：“获取”，
url:“http://localhost/remotexml.php?url=http://www.yr.no/place/“+country+”/“+region+”/“+city+”/forecast.xml”，
成功：函数（xml）{
var localName=$（xml）.find（'location name'）.text（）；
$（“#map div.swip-wrap.city:last child”）。在（“\n\n”+localName+“\n\n”）之后；
$（“#位置”）.append（“\n
”+localName+”
”）；
}
});
});
})
.success（函数（）{}）
.error（函数（）{}）
.complete（函数（）{
变量滑块=
滑动（document.getElementById（'map'）{
汽车：5000，
是的，
回调：函数（pos）{
var i=长度；
而(我--){
项目符号[i]。类名=“”；
}
项目符号[pos].className='on'；
}
});
var-bullets=document.getElementById（'position'）.getElementsByTagName（'li'）；
});

发生的事情是：当我看到jQuery创建的HTML时，它是完美的。jQuery在滑块内创建div，在列表内创建lis。完美的当我运行网站时，加载和启动都很完美，但当更改幻灯片时，在第二张幻灯片上停止，第二张幻灯片是空白的。那里什么也没有。甚至认为HTML上有内容

最奇怪的部分是什么？如果我在网站加载后立即启动开发工具（Chrome上的Command+Alt+I），它就可以正常工作。这是什么样的古怪行为D

---

有人能帮我让这个滑动JS运行吗？

如果你通过AJAX请求用内容填充滑块，然后，在构建滑块之前，您很可能需要等待AJAX请求完成，即在AJAX函数的成功回调中。

在firefox中的行为也与此类似？我使用.responseText；在ajax的末尾。而不是GET，我必须使用这些东西：type:“POST”，async:false。它工作得很好，但只有当我使用php作为json时。现在我正试图用一个真正的json做同样的事情，但它不起作用。有什么想法吗？