title: jquery draggable in iframe won't click
body: <p>I have created a draggable within an iframe from it's parent and I would like to attach an event for when the draggable is clicked.</p>
  
  <p>The draggable works by itself and all the click functions work by themselves, however as soon as you mix the two together the left click events stop working. If I remove the iframe and put the draggable and click bindings in a seperate page it works fine.</p>
  
  <p><em>parent.html</em></p>
  
  <pre><code>&lt;iframe id="siteframe" src="http://jsfiddle.net/kyT6N/show/light/"&gt;
  </code></pre>
  
  <p><em>parent.js</em></p>
  
  <pre><code>$('#siteframe').load(function () {
  
      $('#siteframe').contents().find('.draggable').draggable({ delay:200, iframeFix: true});
  
      $('#siteframe').contents().find('.draggable').bind('mouseup',function() {
          alert('mouse up');
      });  
  
      $('#siteframe').contents().find('.draggable').click(function() {
          alert('click');
      });
      $('#siteframe').contents().find('.draggable').on('click', function() {
          alert('click');
      });
  </code></pre>
  
  <p>});</p>
  
  <p><em>iframe.html</em></p>
  
  <pre><code>&lt;div class="draggable"&gt;draggable&lt;/div&gt;
  </code></pre>
  
  <p>JSFiddle code:
  <a href="http://jsfiddle.net/A5T3Q/" rel="nofollow">http://jsfiddle.net/A5T3Q/</a></p>
  
  <p>JSFiddle demo:
  <a href="http://jsfiddle.net/A5T3Q/show/light/" rel="nofollow">http://jsfiddle.net/A5T3Q/show/light/</a></p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>After investigating a bit further it seems that it's the <em>iframeFix: true</em> option that messes with the click function, I'm guessing this is because it overlays the iframe? is there anything that can be done about this?</p>