title: How to access dynamically created element in Jquery
body: <p>In the HTML structure, i have list of items which are styled as inline-block, and i'm wrapping the list with <code>&lt;marquee&gt; &lt;/marquee&gt;</code> tags using JQuery since i'm not able to add id directly from the drupal8 view.</p>
  
  <p>What i'm trying to do is i have 2 buttons left and right, when i click on the respective buttons the marquee should change the direction its moving.</p>
  
  <p>Since its dynamically created element, i'm not able to access the element with jquery, i'm getting the error 'not defined'.</p>
  
  <p>When i click on the right and left buttons i'm getting the below error</p>
  
  <blockquote>
    <p>marquee.start is not a function</p>
  </blockquote>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var $j = jQuery;
  
  $j(".item-list &gt; ul").wrap("&lt;marquee class='scrollermarquee'&gt;&lt;/marquee&gt;");
  
  $j('.view-header').on('click', function() {
    var marquee = $j('.scrollermarquee').addClass('mia');
    marquee.stop();
    marquee.direction = 'left';
    marquee.start();
  })
  
  $j('.view-footer').on('click', function() {
    var marquee = $j('.scrollermarquee').addClass('mia');
    marquee.stop();
    marquee.direction = 'right';
    marquee.start();
  })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="view view-ticker view-id-ticker view-display-id-block_1 js-view-dom-id-95599754f8c1606496d24cbc4e81ab801ba6c7756348defe6e876248e992d5e0"&gt;
    &lt;div class="view-header"&gt;
      &lt;p&gt;&lt;span class="leftbutton"&gt;&amp;lt;&lt;/span&gt;&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="view-content"&gt;
      &lt;div class="item-list"&gt;
        &lt;marquee class="scrollermarquee mia"&gt;
          &lt;ul&gt;
            &lt;li&gt;
              &lt;div class="views-field views-field-title"&gt;&lt;span class="field-content"&gt;&lt;a href="/node/805" hreflang="en"&gt;test-report-3&lt;/a&gt;&lt;/span&gt;&lt;/div&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;div class="views-field views-field-title"&gt;&lt;span class="field-content"&gt;&lt;a href="/node/801" hreflang="en"&gt;test-report-1&lt;/a&gt;&lt;/span&gt;&lt;/div&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;div class="views-field views-field-title"&gt;&lt;span class="field-content"&gt;&lt;a href="/node/470" hreflang="en"&gt;test-report-2&lt;/a&gt;&lt;/span&gt;&lt;/div&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/marquee&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="view-footer"&gt;
      &lt;p&gt;&lt;span class="rightbutton"&gt;&amp;gt;&lt;/span&gt;&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>