jeditable propagation

Question

i'm using jeditable and I have nested elements all binded to jeditable. Problem is when I click on a nested element the click event gets triggered on the top most parent. How can I avoid this ?

$(document).ready(function() {
 console.log('loading');
 $('div.wrapper').editable('edit/', { 
     loadurl   : 'edit/',
     //id        : 'section',
     name      : 'content',
     submitdata  : function(value, settings) {
         var section = $(this).parent('section').attr("data-section");
         return {
             section: section,
             type: 'ajax',
         }
     },
     loaddata  : function(value, settings) {
         var section = $(this).parent('section').attr("data-section");
         return {
             section: section,
             type: 'ajax',
         }
     },
     rows      : 6,
     width     : '100%',
     type      : 'textarea',
     cancel    : 'Cancel',
     submit    : 'OK',
     indicator : 'Saving changes',
     tooltip   : "Doubleclick to edit...",
     onblur    : 'ignore',
     event     : "dblclick",
     style     : 'inherit',
     callback : function(value, settings) {
         // console.log(this);
         console.log(value);
         console.log(settings);
         $('section[class^="annotation"]').each(function(index) {
            $(this).attr('data-section', index + 1);
         });
     }
 });
});

[edit]

Here is the HTML code:

<article>
    <section class="annotation1" data-section="1" id="section_data-section1" typeof="aa:section">
        <div class="wrapper" title="Doubleclick to edit...">
            <h1>Section </h1>
            <p>some content</p>
            <section class="annotation2" data-section="2" id="subsection_data-section2" typeof="aa:section">
                <div class="wrapper" title="Doubleclick to edit...">
                    <h2>Subsection </h2>
                    <p>some more content</p>
                </div>
            </section>
        </div>
    </section>
</article>

Thanks!

Answer 1

This is trickier than I originally thought...

Firstly, you could handle the .dblclick event for the div.wrapper , so you can stop event propagation. At each double-click, you attach the jEditable to the element and trigger it (note the .click() after calling .editable() . After finish editing the element, destroy the jEditable element.

While I was thinking it was the end of it, something trickier came up. When finishing editing the outer div.wrapper element, the dblclick event in the inner div.wrapper disappeared! So, the div.wrapper element has to be cloned before it becomes an editable element. And just after the jEditable restores the wrapper element, it is replaced with the previously stored clone.

$('div.wrapper').dblclick(function(event) {
    event.stopPropagation();

    // save a clone of "this", including all events and data
    $(this).data('clone', $(this).clone(true, true))
        .editable('edit/', {
        onreset: function() {
            var $that = this.parent();
            $that.editable('destroy');

            // restore the editable element with the clone
            // to retain the events and data
            setTimeout(function() {
                $that.replaceWith($that.data('clone'));
            }, 50);
        }
    }).click();
});

See it in action: http://jsfiddle.net/william/vmdz6/3/ .

You may need to manually update the cloned element after it is updated with the edited data. You should be able to do that in the callback function.