title: How to make an Element Clickable inside a Draggable Element?
body: <p>I am working on a Drag &amp; Drop Builder using JQuery UI. What I want to do is, when I hover on any Drag-able element, a cross appears, and on clicking that cross, that element needs to be removed. 
  Here is my JQuery Code to create a Drag-able Element:</p>
  
  <pre><code>var postfix = '&lt;i class="fa fa-times"&gt;&lt;/i&gt;';
  $(".buildbutton").click(function() {
      var id = this.id;
      if (id === 'label') {
          var elemHtml = '&lt;div class="draggable"&gt;&lt;label contenteditable="true" class="draggable" id="label' + labelCount + '"&gt;Text&lt;/label&gt; ' + postfix + '&lt;/div&gt;';
          $("#canvas").append(elemHtml);
          label++;
      }
      $(function() {
          $( ".draggable" ).draggable({containment: "#canvas"}).resizable();
      });
      return false;
  });
  </code></pre>
  
  <p>JQuery Code to bind a Remove event:</p>
  
  <pre><code>$(".draggable").on("click", "i", function(){
       alert("going to remove this element");
  });
  </code></pre>
  
  <p>But the Click event is not working as the drag-able element is triggering it's own event whenever I click on it.</p>
  
  <p>How Can I make this Cross click-able.?</p>