Jeditable распространения - PullRequest
Новая
       20

Jeditable распространения

4 голосов
/ 15 сентября 2011

Я использую jeditable, и у меня есть вложенные элементы, все связанные с jeditable.Проблема в том, что когда я щелкаю по вложенному элементу, событие click срабатывает на самом верхнем родительском элементе.Как мне избежать этого? 

$(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);
         });
     }
 });
});

[править]

Вот код HTML: 

<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>

Спасибо!

1 Ответ

0 голосов
/ 15 сентября 2011

Это сложнее, чем я думал ...

Во-первых, вы можете обработать событие .dblclick для div.wrapper, чтобы вы могли остановить распространение события.При каждом двойном щелчке вы присоединяете jEditable к элементу и запускаете его (обратите внимание на .click() после вызова .editable(). После завершения редактирования элемента уничтожьте элемент jEditable.

Пока я об этом думалбыл конец этого, что-то более хитрое получилось. При завершении редактирования внешнего элемента div.wrapper событие dblclick во внутреннем div.wrapper исчезло! Итак, элемент div.wrapper необходимо клонировать, прежде чем он станет редактируемымэлемент. И сразу после того, как jEditable восстанавливает элемент-оболочку, он заменяется ранее сохраненным клоном. 

$('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();
});

Смотрите его в действии: http://jsfiddle.net/william/vmdz6/3/.

Возможно, вам придется обновить вручнуюклонированный элемент после того, как он обновляется с отредактированными данными. Это можно сделать с помощью функции callback.

...