0

Do you know why I get Maximum call stack size exceeded if I insert a code inside a function and execute it.

$(function() {
  function loadContent() {
    $.getJSON("js/data.json").done(function(data) {
      var content = '';
      $.each(data, function(i, item) {
        content += '<div class="item" id="' + item.id + '" data-lat="' + item.latitude + '" data-lng="' + item.longitude + '" style="background-image: url(img/' + item.photo + ');"><div class="item__wrapper"><h2 class="item__title">' + item.title + '</h2><p class="item__content">' + item.description + '</p><span class="lat"><i class="fa fa-location-arrow"></i> ' + item.latitude + ' N, </span><span class="long">' + item.longitude + ' E</span></div></div>';
        var latLng = new google.maps.LatLng(item.latitude, item.longitude);
        var marker = new google.maps.Marker({
          position: latLng
        });
        marker.setMap(map);
      });
      $('#sidebar').html(content);

      $('.item').on("click", function() {
        $(this).toggleClass("item--expanded").siblings().removeClass("item--expanded");
      });
    }).fail(function() {
      var content = '<p>Błąd wczytywania danych!</p>';
      $('#sidebar').html(content);
    });
  }
  loadContent();
});

If I don't use function loadContent() It works fine. I've read it Maximum call stack size exceeded error but I don't execute the loop inside loop.

Edit: The problem is cause by this code:

  <script>
  var placeList = document.getElementById("sidebar");
      placeList.addEventListener("click", getPlace, false);

      function getPlace(ev) {
        if (ev.target !== ev.currentTarget) {
          clickedItem = ev.target.id;
          var getItem = document.getElementById(clickedItem);
          var lat = getItem.dataset.lat;
          var lng = getItem.dataset.lng;
        }
        var center = new google.maps.LatLng(lat, lng);
        map.panTo(center);
        map.setZoom(13);
      }
</script>
But still don't know why!
NetPax
  • 111
  • 1
  • 6

0 Answers0