My Flickity loop does not recognize the innerHTML or the .html () of jquery

[gtextil]

my loop does not recognize the innerHTML or the .html () of jquery. I do not know why. Might you help me?

If I write directly in the HTML document if it recognizes it but not from the external javascript file.

---

IN JAVASCRIPT DOC

var div_res = '';

for (var i in feed) {
  div_res += '<div class="main-carousel-2">'+
              '<img src="' + feed[i].imagen_apple + '">'+
              '<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/grapes.jpg"/>'+
              '</div>';
}

$("#response_server").html(div_res);

---

IN HTML DOC

 <div id="response_server"></div>

 <script>

        var galleryElems = document.querySelectorAll('.main-carousel-2');
          for ( var i=0, len = galleryElems.length; i < len; i++ ) {
            var galleryElem = galleryElems[i];
            new Flickity( galleryElem, {
                cellAlign: 'left',
                contain: true
            });
          }

      </script>

[desandro]

@gtextil I would use .find() from the response_server element with .each('.main-carousel-2') to initialize Flickity:

var div_res = '';

for (var i in feed) {
  div_res += '<div class="main-carousel-2">'+
              '<img src="' + feed[i].imagen_apple + '">'+
              '<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/grapes.jpg"/>'+
              '</div>';
}

var $responseServer = $("#response_server").html(div_res);
$responseServer.find('.main-carousel-2').each( function( carousel) {
  // init Flickity
  $( carousel ).flickity({ ... });
});

I wrote about this concept in Fizzy School - simplify selectors