getJSON loading to slow, .toggle() not triggering

Question

Я не знаю, как точно объяснить проблему должным образом так голыми со мной.

Цель = переключить раздел «подробнее» для определенного элемента в списке
Проблема = простой JQuery .toggle() не работает
Возможные вызывают = getJSON нагрузки замедлять

Итак, я загружаю четырехсекундный json, чтобы получить места вокруг моего текущего местоположения. Я тогда .append() те места с jQuery к моему HTML. После этого у меня есть функция для переключения раздела с дополнительной информацией на событие click.

После некоторого поиска я думаю, что нашел проблему. Мой getJSON начинает загрузку, а затем моя следующая функция загружается в jQuery. После загрузки следующей функции (которая равна моему .toggle()) конец getJSON завершается. Поэтому я думаю, что моя функция с моим .toggle() не может найти классы для переключения, потому что они еще не в моем HTML, потому что мой getJSON не закончил загрузку данных.

Это мой jQuery code.
И выход из моей консоли в браузере есть этот порядок:

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

Это из-за этого meta.code на линии 10, я считаю, что 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"); 
    }); 
}