title: How to show dynamically created element on mouse down
body: <p><code>.rollimgwrap</code> is a wrap for <code>.rollmark</code> and <code>.rollimgb</code> and this are all dynamically created</p>
  <p><code>.rollimgb</code> is hidden by default and I need it show while keeping a mouse down on <code>.rollmark</code>.</p>
  <p>Here is my try - without success</p>
  <p><strong>html</strong></p>
  <pre><code>&lt;div class='rollimgwrap'&gt;
  &lt;div class='rollmark'&gt;MARK&lt;/div&gt;
  &lt;img class='rollimgb' src='...' alt='img'&gt;
  &lt;/div&gt;
  </code></pre>
  <p><strong>js</strong></p>
  <pre><code>$(document).on('mousedown', '.rollimgwrap .rollmark', function(e){
      $(this).parent().find('.rollimgb').show();
  })
  .on('mouseup', '.rollimgwrap .rollmark', function(){
    $(this).parent().find('.rollimgb').hide();
  });
  </code></pre>
  <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>$(document).on('mousedown', '.rollimgwrap .rollmark', function(e) {
      $(this).parent().find('.rollimgb').show();
    })
    .on('mouseup', '.rollimgwrap .rollmark', function() {
      $(this).parent().find('.rollimgb').hide();
    });
  
  function addHtml() {
    $('.dynamic').append(`
    &lt;div class='rollimgwrap'&gt;
      &lt;div class='rollmark'&gt;MARK&lt;/div&gt;
      &lt;img class='rollimgb' src='...' alt='img' style='display:none;' /&gt;
    &lt;/div&gt;
  `);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;input type='button' value='add dynamic html' onclick='addHtml()' /&gt;
  
  &lt;div class='dynamic'&gt;  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>