title: X-editable toggle on click. How to disable native element click?
body: <p>Problem is that cant disable native "on click" event that triggers x-editable to transform into textarea. I want that only Button could tranfsorm text to textarea, So that on text is non-clickable.</p>
  
  <p>I found questions how to trigger x-editable on other element click.
  But how to disable native text click and leave only other element's event ?</p>
  
  <p>Fiddle with problem is here:</p>
  
  <p>This part works great:</p>
  
  <pre><code>$('.edit-post-button').on('click', function(e) {
      e.preventDefault();
      e.stopPropagation();
      $textarea = $(this).closest('.media-body').find('.editable');
      $textarea.editable('toggle');        
  });
  </code></pre>
  
  <p>But when trying to disable native text click, it wont work, or I'm doing something wrong here ?</p>
  
  <pre><code>$('.editable-post-textarea').on('click', function(e) {
      console.log('native-click-triggered!');
      e.stopPropagation();
  });
  </code></pre>
  
  <p>Here is sample with my problem: <a href="http://jsfiddle.net/jjdJX/64/" rel="nofollow">http://jsfiddle.net/jjdJX/64/</a></p>
  
  <p><strong>So how to disable native "click" event on textarea, and leave trigger only on "EDIT TEXT" button?</strong></p>