jeditable propagation

Question

我使用jeditable，並且我嵌套的元素都綁定到jeditable。問題是當我點擊一個嵌套元素時，點擊事件觸發了最頂層的父元素。我怎樣才能避免這種情況？

$(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事件的div.wrapper，這樣你就可以停止事件傳播。在每次雙擊時，您將jEditable附加到元素並觸發它（請注意調用.editable()後的.click()。完成編輯元素後，銷燬jEditable元素。

雖然我在想它是它的結尾，當編輯外層div.wrapper元素時，內層div.wrapper中的dblclick事件消失了！因此，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(); 
}); 

Se它在行動：http://jsfiddle.net/william/vmdz6/3/。

您可能需要在用編輯的數據更新後手動更新克隆的元素。你應該可以在callback函數中做到這一點。