X-editable toggle on click. How to disable native element click?

Question

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.

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 ?

Fiddle with problem is here:

This part works great:

$('.edit-post-button').on('click', function(e) {
    e.preventDefault();
    e.stopPropagation();
    $textarea = $(this).closest('.media-body').find('.editable');
    $textarea.editable('toggle');        
});

But when trying to disable native text click, it wont work, or I'm doing something wrong here ?

$('.editable-post-textarea').on('click', function(e) {
    console.log('native-click-triggered!');
    e.stopPropagation();
});

Here is sample with my problem: http://jsfiddle.net/jjdJX/64/

So how to disable native "click" event on textarea, and leave trigger only on "EDIT TEXT" button?

Answer 1

Disable elements' click event using:

$('.editable-post-textarea').off('click');

Fiddle: http://jsfiddle.net/jjdJX/65/

Answer 2

In version 1.5.1 you can set a 'toggle' option with a 'manual' value

$('.editable').editable({
  toggle: 'manual'
});

Doing this has the nice side effect of removing the dashed-underline decoration in the editable field.

source official x-editable docs