Question

目的 =切换部分＆＃39;更多信息＆＃39;对于列表中的特定项目
问题 =一个简单的jQuery .toggle()无法正常工作可能 cause = getJSON加载缓慢

我正在加载一个foursquare json来获取我当前位置周围的场地。然后我.append()那些带有jQuery的场所到我的HTML。在那之后，我有一个功能来切换一个部分＆＃39;更多信息＆＃39;点击活动。

经过一番搜索，我觉得我发现了问题。我的getJSON 开始加载，然后我的下一个函数被加载到jQuery中。在加载下一个函数（这是我的.toggle()）之后，getJSON终于完成了。所以我认为我的.toggle()功能无法找到要切换的类，因为它们还没有在我的HTML中，因为我的getJSON没有完成加载数据。

这是我的jQuery code 我的浏览器在我的浏览器中的输出有这个顺序：

loaded 4sq venues                    line 29
toggle function loaded               line 33
200                                  line 10

由于第10行的这个meta.code，我认为getJSON会减慢加载速度......

我希望自己足够清楚提前致谢

Answer 1

您应该将click事件添加到正文

$('body').on('click', '.venueLabel', function(){
     $(".venueMore").toggle("slow");
});

因为你动态添加元素！

Answer 2

getJSON将是异步的。这意味着它不会阻止其他Javascript在运行时停止运行。

您应该在getFoursquareVenues中使用回调。示例如下。

$(window).load(function() {
    getFoursquareVenues(openDetailVenues());
});

function getFoursquareVenues(callback) {

    $.getJSON("https://api.foursquare.com/v2/venues/search?client_id=placeholder&client_secret=placeholder&v=20130815&ll=51.0824401,3.714485&query=cafe", function(data) {

        console.log(data.meta.code);

        $('#venueList').html();
        var content = '';

        $.each(data.response.venues, function(index, elm) {
            content += '' + '<div class="venue col-xs-12">' + '<div class="venueLabel" id="' + elm.id + '">' + elm.name + '</div>' + '<div class="venueMore">' + elm.location.address + elm.hereNow.count + '</div>' + '</div>'
        });
        $('#venueList').append(content);

        if (callback) { callback() };
    });
    console.log('loaded 4sq venues');
}

function openDetailVenues() {
    console.log('toggle function loaded');
    $(".venueLabel").click(function() {
        $(".venueMore").toggle("slow");
    });
}

getJSON加载缓慢，.toggle（）不触发

2 个答案: