jeditable伝播

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

あなたはイベントの伝播を停止することができますので、これは私が当初考えていたよりも複雑です...

まず、あなたは、div.wrapperため.dblclickイベントを処理することができます。

私はそれが終わったと思っていましたが、私はそれが終わったと思っていましたが、外側の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機能でこれを実行できるはずです。