title: how to give hide/delete and copy the div when hold on that div using jquery mobile
body: <p>We are developing chat application using jquery mobile in worklight.</p>
  
  <p>In that application we are showing the message,images and voice record. so i want to do when hold any thing like message,image,voice record file on that div i need to show copy and clear/delete option and if delete or option is selected i want do that functionality and if it is copy i want to do that functionality.</p>
  
  <p>But i am trying to tab hold event from jquery mobile but it is not working. any one please tell me how to do for my requirement.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).on("pagecreate","#chat",function(){
     $(".clear").on("taphold",function(){
      alert("jf")
      e.stopPropagation();
      $(this).simpledialog2({
            mode:"blank",
            headerText:"Image Options",
            showModal:false,
            forceInput:true,
            headerClose:true,
            blankContent:"&lt;ul data-role='listview'&gt;&lt;li&gt;Clear/Delete&lt;/li&gt;&lt;li&gt;Copy&lt;/li&gt;&lt;/ul&gt;"
        });
      
     });                       
   });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.right {
    position: relative;
    background: #fff;
    text-align: right;
    padding: 25px 20px 25px 5px;
    border-radius: 10px;
    border: 1px solid #ccc;
    float: right;
    right: 20px;
  }
  
  .right::before {
    content: '';
    position: absolute;
    visibility: visible;
    top: -1px;
    right: -10px;
    border: 10px solid transparent;
    border-top: 12px solid #ccc;
  }
  
  .right::after {
    content: '';
    position: absolute;
    visibility: visible;
    top: 0px;
    right: -8px;
    border: 10px solid transparent;
    border-top: 12px solid #fff;
    clear: both;
  }
  
  div{
    clear:right
  }
  
  .name, 
  .time {
    position: absolute;
    font-size: 14px;
  }
  
  .name {
    top: 2px;
    color: #900;
  }
  
  .right .name {
    right: 4px;
  }
  
  .time {
    bottom: 2px;
    color: #f60;
  }
  
  .right .time {
    left: 4px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="right"&gt;
    &lt;div class="name"&gt;fsdfsfsfsdfdsfsdfsf&lt;/div&gt;
    &lt;span&gt;thanks&lt;/span&gt;
    &lt;div class="time"&gt;time&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="right"&gt;
    &lt;div class="name"&gt;fsdfs&lt;/div&gt;
    &lt;span&gt;thanks&lt;/span&gt;
    &lt;div class="time"&gt;time&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="right"&gt;
    &lt;div class="name"&gt;fsdfs&lt;/div&gt;
    &lt;span&gt;t&lt;/span&gt;
    &lt;div class="time"&gt;time&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://jsfiddle.net/69ya1b1x/4/" rel="nofollow">https://jsfiddle.net/69ya1b1x/4/</a>  </p>