getJSON 加载缓慢，.toggle() 不触发

Question

目的 = 切换列表中特定项目的部分'more info'
问题 = 一个简单的 jQuery .toggle() 不工作
可能原因 = getJSON 加载速度变慢

我正在加载一个四方 json 以获取我当前位置附近的场所。我然后 .append() 那些 jQuery 到我的 HTML 的场地。之后，我有一个功能可以在点击事件中使用 'more info' 切换一个部分。

经过一番搜索，我想我找到了问题所在。我的 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() 不触发

getJSON loading to slow, .toggle() not triggering

html

javascript

jquery

append

getjson