Question

我正在使用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>

谢谢！

Answer 1

这比我原先想象的要复杂......

首先，您可以处理.dblclick的{{1}}事件，以便停止事件传播。每次双击，都会将jEditable附加到元素并触发它（在调用div.wrapper后注意.click()。完成元素编辑后，销毁jEditable元素。

虽然我认为这是它的结束，但是出现了一些棘手的问题。完成外部.editable()元素的编辑后，内部div.wrapper中的dblclick事件消失了！因此，div.wrapper元素必须在它成为可编辑元素之前克隆。在jEditable恢复包装元素之后，它将被先前存储的克隆替换。

div.wrapper

查看实际操作：http://jsfiddle.net/william/vmdz6/3/。

使用编辑后的数据更新克隆元素后，可能需要手动更新克隆元素。您应该可以在$('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(); });函数中执行此操作。

可扩展的传播

1 个答案: