title: slick slider not working on dynamically generated li
body: <p>After not finding a solution for this:</p>
  
  <p><a href="https://stackoverflow.com/questions/49029317/wordpress-doesnt-execute-jquery-code-correctly">Wordpress doesn&#39;t execute jquery code correctly</a></p>
  
  <p>I have decided to change to slick slider hoping it woul work but seems it's impossible to create a proper slider with wordpress and jquery for dynamic content.</p>
  
  <p><strong>What I'm doing:</strong> getting all the custom posts in php and rendering it as an array then called to be rendered in my google map. I then try to render a list on the side of all locations.</p>
  
  <p><strong>More Info:</strong> I do not get console errors.</p>
  
  <p><strong>Problem:</strong> Slick classes get applied to the <code>ul</code> but dont apply to the <code>li</code></p>
  
  <p><strong>How slick renders:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/vLOCP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vLOCP.png" alt="ignoring li"></a></p>
  
  <p><strong>functions.php:</strong></p>
  
  <pre><code>add_shortcode('render-map', 'renderMap');
  function renderMap(){
      wp_enqueue_style( 'slick_css', get_template_directory_uri() . '/css/slick.css');
      wp_enqueue_style( 'slick_style', get_template_directory_uri() . '/css/slick-theme.css');
      wp_enqueue_style( 'mapStyle', get_template_directory_uri() . '/css/mapStyle.css');
      wp_register_script( 'googleMap', 'https://maps.googleapis.com/maps/api/js?key=mykey&amp;callback=initMap', false, false, false );
      wp_enqueue_script( 'googleMap' );
      wp_enqueue_script( 'slick_js', get_template_directory_uri() . '/js/slick.min.js');
      wp_enqueue_script( 'markerClusterer', get_template_directory_uri() . '/js/markerClusterer.js');
      wp_enqueue_script( 'mapRenderer', get_template_directory_uri() . '/js/mapRenderer.js', array(), false, true );
      echo '&lt;div class="interactiveMap"&gt;&lt;div class="rowMap"&gt;';
      echo '&lt;div id="map-canvas"&gt;&lt;/div&gt;';
      echo '&lt;div class="sidebarLocation"&gt;
          &lt;div class="recentArticles"&gt;
              &lt;div class="recentArticlesHeader"&gt;
                  &lt;a href="#" class="ca_goUp"&gt;&lt;i class="fas fa-chevron-up"&gt;&lt;/i&gt;&lt;/a&gt;
              &lt;/div&gt;
              &lt;ul id="sidebarLocation" class="recentArticlesGroup sidebarLocationUl"&gt;';
      global $post;
      $args = array(
          'post_type' =&gt; 'map-location',
          'posts_per_page' =&gt; -1,
          'post_status' =&gt; 'publish'
      );
      $map_locations = get_posts( $args );
      $myResult = renderLocation($map_locations);
      echo '&lt;/ul&gt;
          &lt;div class="recentArticlesFooter"&gt;
              &lt;a href="#" class="ca_goDown"&gt;&lt;i class="fas fa-chevron-down"&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;/div&gt;
          &lt;/div&gt;
          &lt;/div&gt;';
      echo '&lt;/div&gt;&lt;/div&gt;';
      echo "&lt;script type='text/javascript'&gt;";
      echo '$( document ).ready(function() {';
      $js_array = json_encode($myResult);
      echo "var javascript_array = ". $js_array . ";\n";
      echo 'gmaps_results_initialize(javascript_array);});';
      echo "&lt;/script&gt;";
      wp_enqueue_script( 'slick_call', get_template_directory_uri() . '/js/slick-call.js', array( 'jquery' ), false, false );
  }
  </code></pre>
  
  <p><strong>slick-call.js</strong></p>
  
  <pre><code>jQuery(document).ready(function($){
    $('#sidebarLocation').slick({
      arrows: true,
      vertical: true,
      slide: 'li',
      slidesToShow:3,
      slidesToScroll:1,
    });
  });
  </code></pre>